关于javascript：jQuery onload-.load()-事件不适用于动态加载的iframe


jQuery onload - .load() - event not working with a dynamically loaded iframe

用户单击按钮时，我的脚本会加载iframe。 我想在iframe加载后调用另一个函数，但无法正常工作。 iframe确实可以正常加载，但是在iframe完成加载后，永远不会调用.load()事件。 iframe包含来自同一网站的内容(没有外部内容)。 奇怪的是，我在代码中的其他一些地方使用了以下所述的相同技术，因此效果很好。 谁能建议我下一步应该检查什么？

以下是相关代码：

1
2
3
4
5
6
7
$('#myIframe').load(function () {
    alert('iframe loaded');
});

$('#someButton').live('click', function () {
    $('body').append($('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>'));
});

似乎有点类似于这里的问题：

jQuery .ready在动态插入的iframe中

通过这种方式，iframe元素与附件一起存在于Dom中。只有在设置了"网址"后，它才会加载，这时您已经附加了希望标记的加载功能。
所以对于你的代码

1
2
3
4
5
6
7
8
9
10
$('#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');
    });

});
相关讨论

尝试这个：

1
2
3
4
5
6
$("<iframe id='myId'></iframe>").appendTo("body")
    .attr('src', url)
    .load(function()
     {
         callback(this);
     });

只需添加一些链接，创建选择器通常所在的元素(这是可能的)，然后将其附加到主体。

您的代码示例不起作用的原因是因为您绑定到了不存在的元素，然后在元素没有load事件附加的事件处理程序时将该元素放入DOM中。尝试这个：

1
2
3
4
5
6
$('#someButton').live('click', function () {
    var $iframe = $('<iframe id="myIframe" src="" width="100%"></iframe>').load(function () {
        alert('iframe loaded');
    }).attr('src', 'https://www.mywebsite.com');
    $('body').append($iframe);
});

或更接近原始代码，可以将.load()替换为.live('load')：

1
2
3
4
5
6
7
$('#myIframe').live('load', function () {
    alert('iframe loaded');
});

$('#someButton').live('click', function () {
    $('body').append('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>');//notice I removed the $() around the append code as it is unnecessary
});

如果您要控制在iframe中加载的文档，请尝试将加载处理程序放入该文档中。如果需要在iframe加载后父文档执行某些操作，则可以从子文档中调用父文档中的函数：

1
2
3
4
5
6
7
8
9
// in parent doc
function myIframeLoaded() {
   // do something
}

// in iframe doc
$(document).load(function() {   // or .ready()
   parent.myIframeLoaded();
}