add `load` event for EVERY iFrame on a page

Question

I have a page that has dynamically added iFrames in it. I want to catch the "onLoad" event for every iFrame.

So basically, I want to attach the event to the body but have it apply to every child iFrame. This works for other events, but it seems like the "load" event isn't propagating.

Here's what I've tried so far:

$(document).on("load", "iframe", function() {
 $("body").append("this is what I want, but it doesn't work!");
});

var iFrame = $("<iframe/>", {
        srcdoc  : "<html style='overflow: hidden;'><body>Appended iFrame</body></html>"
});

$("body").append(iFrame);

iFrame.on("load",function(){
 $("body").append("this seems to work.... but isn't what I'm looking for.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

and here it is on jsfiddle: https://jsfiddle.net/skeets23/qsrf802z/8/

Any way to get this working as expected? So I can just create one binding and have it work for any number of dynamically added iFrames?

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — peeebeee, Sep 11 '18 at 06:06
@peeebeee no, I wish it was that easy. Quoting my question: "This works for other events, but it seems like the "load" event isn't propagating." — Skeets, Sep 11 '18 at 06:08

score 1 · Accepted Answer · answered Sep 12 '18 at 00:09

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>

Very nice! I didn't know about the "DOMNodeInserted" event. Thanks. — Skeets, Sep 12 '18 at 00:21

score 0 · Answer 2 · answered Sep 11 '18 at 06:15

Change $(document).on("load" ... to $("iframe").on("load", .... And place it at end of script, it will work!

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....");
  //alert("cde");
});
$("iframe").on("load", function () {
 $("div").append("this does NOT seem to work!");
  alert("abc");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>

    </div>

A good idea, but the idea here is that there may be iFrames added dynamically later. So the code needs to stay in the order it's in (binding first, appending iFrame next) What I'm asking may not be possible... :/ — Skeets, Sep 11 '18 at 06:43

add `load` event for EVERY iFrame on a page

2 Answers2