javascript - jQuery .on ('load' ) 不适用于对象/iframe 而 .addEventListener ('load' ) 可以

Question

我正在尝试修改 iframe/对象内容，将脚本添加到其中。目前，我有这样的事情:

// "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));
        });
    });
});

它按预期工作(脚本完成它的工作并将其添加到 iframe 的 DOM 中)但是当我尝试以“jQuery”方式执行时出现问题:

// "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));
        });
    });
});

在前面的代码中，脚本不会添加到 iframe 的 dom 中。

.on('load') 版本不工作有什么原因吗？有什么问题？我错过了什么吗？

PS:iframe 是同源的。

Answer 1

在每种情况下，内部函数的 this 可能并不总是您想要的。我会尝试:

$(function() {
    $('object, iframe').each(function () {
        $(this).on('load', function (event) {
            event.target.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
        });
    });
});

比照。 https://api.jquery.com/event.target/