Jquery Iframe Load() Event

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



Leave a reply



Submit