jQuery iframe load() event?
If possible, you'd be better off handling the load
event within the iframe's document and calling out to a function in the containing document. This has the advantage of working in all browsers and only running once.
In the main document:
function iframeLoaded() {
alert("Iframe loaded!");
}
In the iframe document:
window.onload = function() {
parent.iframeLoaded();
}
Catch the load event from iframes, using jQuery delegation
How can we detect any iframe load from the page using delegation?
Unfortunately, It is not possible catching the iframe load events via jQuery delegation.
add `load` event for EVERY iFrame on a page
Seems you want to add iframe dynamically, so, best method is catch event DOMNodeInserted of document. See example follow:
$(document).on('DOMNodeInserted', function(e) { //check is iframe is loaded if(e.target.localName=="iframe"){ console.log("New iframe loaded!"); $("div").append("this does NOT seem to work!"); };});function addIframe(){ var iFrame = $("<iframe />", { srcdoc : "<html style='overflow: hidden;'><body>Appended iFrame</body></html>" }); $("body").append(iFrame); iFrame.on("load",function(){ $("div").append("this seems to work...."); });};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="addIframe();">Add Iframe</button> <div>
</div>
jQuery onload - .load() - event not working with a dynamically loaded iframe
Seems somewhat similiar to the question here:
jQuery .ready in a dynamically inserted iframe
This way the Iframe element exists in the Dom with the append. Only when you set the Url will it load, by which point you've attached the load function you wish to tag on the end.
So for your code
$('#someButton').live('click', function () {
$('body').append($('<iframe id="myIframe" width="100%"></iframe>'));
$('#myIframe').attr('src',"https://www.mywebsite.com");
$('#myIframe').load(function () {
alert('iframe loaded');
});
});
How do I fire an event when a iframe has finished loading in jQuery?
I'm pretty certain that it cannot be done.
Pretty much anything else than PDF works, even Flash. (Tested on Safari, Firefox 3, IE 7)
Too bad.
Load event for iFrame not fired in IE
I think for iframes in Internet Explorer you can't set that event handler (onload) programmatically, you need to specify it in your markup.
Something like:
<iframe id="myFrame" onload="myFunction();"></iframe>
Otherwise IE is just going to ignore the function.
JQuery IFrame Load event firing too soon
In your code you are setting the source of the iframe
when you added markup to RedmapDialog
and after that load event handler is attached. Before it reaches this code the iframe must have already been loaded. Try to set the source of the iframe after you have set the iframe load event handler as below
$(".RedmapButton").bind('click', function(event) {
baseHistory = history.length;
var data='<a href = "javascript:history.go(-1)">Back to previous page</a>'
data = data + '<iframe src="javascript:void(0);" width="100%" height="100%" id="RMFrame"></iframe>'
$("#RedmapDialog").html(data);
$("#RedmapDialog").dialog("option", "title", 'Document: ');
$("#RedmapDialog").dialog("open");
$('#RMFrame').load(function() {
alert("history.length=" + history.length);
}).attr("src", "http://www.google.com/");
});
Related Topics
Map Isn't Showing on Google Maps JavaScript API V3 When Nested in a Div Tag
Why Does Changing One Array Alters the Other
How to Prevent Simultaneous Logins of the Same User with Firebase
Why JavaScript Function Declaration (And Expression)
How to Check If a Selector Matches Something in Jquery
How to Detect Timeout on an Ajax (Xmlhttprequest) Call in the Browser
Display the Contents of a Log File as It Is Updated
Batchsize Field Name Ignored in Field Projection
Angular2 Component's "This" Is Undefined When Executing Callback Function
What Are Closures and Callbacks
How to Sort/Order Keys in JavaScript Objects
How Not to Forget Using Await Everywhere in JavaScript