jQuery .on('load') doesn't work with an object/iframe while .addEventListener('load') does

Viewed 126

I'm trying to modify an iframe/object content adding a script into it. At the moment, I have something like this:

// "script" is a node with an self-called function as its content
$(function() {
    $('object, iframe').each(function() {
        this.addEventListener('load', function() {
            this.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
        });
    });
});

And it works as expected (the script does its job and it is added to the DOM of the iframe) but the problem comes when I try to do it the "jQuery" way:

// "script" is a node with an self-called function as its content
$(function() {
    $('object, iframe').each(function() {
        $(this).on('load', function() {
            this.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
        });
    });
});

In the previous code, the script won't be added to the dom of the iframe.

Is there any reason why the .on('load') version is not working? What can be wrong? Am I missing something?

PS: The iframe is same-origin.

1 Answers
Related