iframe store in variable and append it - javascript

My bootstrap modal play a video that loads in a iframe.
Now i want to make my iframe data null first when click modal close button then insert a iframe from background on this iframe
my code
$('#abc_55').on('hide', function () {
var newSrc="http://www.youtube.com/embed/XGSy3_Czz8k";
document.getElementById("preview-frame").src='';
document.getElementById("preview-frame").src=newSrc;
});
But its not work

Related

click slideshow button inside Iframe

I have embedded PPT file using iframe
<iframe id="main_iframe" src='https://view.officeapps.live.com/op/view.aspx?src=https://abc/resources/uploads/images/screens/ScreenTest.pptx'
width='100%' height='600px' frameborder='0'></iframe>
which is coming like
Now i am trying to click Start Slide Show Button using jQuery
$(function() {
//find iframe
let iframe = $('#main_iframe');
//find button inside iframe
let button = iframe.contents().find('#PptUpperToolbar.LeftButtonDock.LaunchSlideShow-Medium20');
//trigger button click
button.trigger("click");
});
But is is not working for me and there is no error on my local.
Some one please help me out from this problem.

Add custom HTML in iFrame that already has a page loaded in it

I have a button and an iframe. When button is clicked, it opens a page in the iframe. I have another button, when it is clicked, it is supposed to add custom html to the already loaded page in the iframe, but it is not working.
HTML:
Load page in Iframe
Update iframe
<iframe src="" width="100%" height="500px" id="main_iframe"></iframe>
The jQuery to load page in iframe is working fine:
function site_load_1() {
$('#main_iframe').attr('src', "https://bing.com");
}
The jQuery to update iframe with custom html is not working:
function update_iframe() {
var myFrame = $("#main_iframe").contents().find('body');
var newContent = "<h1>hello</h1>";
myFrame.html(newContent);
}
However, it does work when the iframe is empty, as in, when page has not been loaded into it via the first button.

How to trigger iframe load event more than once when changing iframe source

I have an iframe that links to another internal web application.
There's a side panel with a list of links that changes the src of the iframe. Sometimes if there's a lot of data, the iframe site takes a while to load. I want to put a spinner icon when a link is clicked and hide it when the frame is loaded.
I change the src using $('#myiframe').attr('src', urlVar) in a click function for the links. I can show the spinner on click.
The problem is, how do I hide it? How do I find out that the iframe has finished loading?
I tried using $('#myiframe').load(function() { }) but that only works on the initial load (i.e. for the first link I click), not for subsequent loads (if I click on another link).
This javascript works for me :
function loadNewUrl (url){
if(url === undefined) url = 'http://example.com?v=' + Math.random();
var ifr = document.getElementById('myiframe');
ifr.setAttribute('src',url);
ifr.onload = function() {
alert('loaded');
};
}

Close iFrame On Button Click Within Itself

I load an iFrame of another page of my website dynamically. I would like to close the iFrame by clicking on an "X" button within the iFrame. I have created a Jquery function in my main JavaScript file, and I have also added some Javascript to my page frame itself (within my own domain).
In my main JS file:
var closeIFrame = function() {
$('#iframeContact').remove();
$("#overlay").toggleClass("overflowhidden overflow");
};
On my iFrame page (at the bottom of the page's HTML):
<script>
$("#menuOverlayBack").click(function(){
parent.closeIFrame();
}
I even have tried putting an "onclick" HTML element on my button to no avail:
<i class="menuOverlayBack material-icons" id="menuOverlayBack" onclick="parent.closeIFrame()">arrow_back</i>
Try using jQuery to modify the visibility of the iframe when "x" is clicked..
$("#close").click(function() {
$("#myIframe").css({"display": 'none'});
});

Iframe in the jquery UI dialog

I have an iframe in the jquery UI dialog , setting its src at doument.ready event :
$(document).ready(function() {
$("#iframe").attr("src", whatever);
$("#button").click(function() { $("#dialog").dialog(); });
});
<div id="dialog">
<iframe src="" id="iframe"></iframe>
<div>
Everything is going fine, when i click over the button dialog open but the problem is that it loads iframe content everytime when dialog open.I want to stop this behaviour and load the contents only once at document.ready event.How can i do this?
Use another iframe, hidden, then on dialog open just copy its content to your iframe in the dialog.
The problem is that JqueryUI destroys the dialog when you close it.
Here's a simple workaround: https://stackoverflow.com/a/9128123/477176

Categories