jQuery onload - .load（） - 事件不能与动态加载的iframe一起使用

Question

当用户单击按钮时，我的脚本会加载iframe。 我想在iframe加载后调用另一个函数，但它不起作用。 iframe确实正常加载，但iframe完成加载后永远不会调用.load（）事件。 iframe包含来自同一网站的内容（无外部内容）。 奇怪的是，我在我的代码中的其他几个点使用了下面描述的相同技术，它运行得很好。 谁能建议我接下来应该检查什么？

这是相关的代码：

$('#myIframe').load(function () {
    alert('iframe loaded');
});

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

Answer 1

看起来有点类似于这里的问题：

jQuery .ready在动态插入的iframe中

这样，Iframe元素存在于附加的Dom中。 只有当您设置了Url才会加载，此时您已经附加了要在末尾标记的加载函数。 所以对你的代码

$('#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');
    });

});

Answer 2

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

$('#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);
});

或者更接近您的原始代码，您可以使用.live('load')替换.load() .live('load') ：

$('#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
});

Answer 3

尝试这个：

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

刚添加了一些链接，创建了选择器通常所在的元素（这是可能的），并将其附加到正文。

Answer 4

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

// in parent doc
function myIframeLoaded() {
   // do something
}

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