Javascript jQuery onload - .load() - 事件不适用于动态加载的 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8233278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery onload - .load() - event not working with a dynamically loaded iframe
提问by jake
My script loads an iframe when the user clicks a button. I want to call another function after the iframe loads, but it's not working. The iframe does load normally, but the .load() event never gets called after the iframe finishes loading. The iframe contains content from the same website (no external content). The strange thing is that I'm using the same technique described below at a few other points in my code and it works perfectly. Can anyone suggest what I should check next?
当用户单击按钮时，我的脚本加载 iframe。我想在 iframe 加载后调用另一个函数，但它不起作用。iframe 确实加载正常，但 .load() 事件在 iframe 完成加载后永远不会被调用。iframe 包含来自同一网站的内容（无外部内容）。奇怪的是，我在代码中的其他几个点使用了下面描述的相同技术，并且它运行良好。谁能建议我接下来应该检查什么？
Here's the relevant code:
这是相关的代码：
$('#myIframe').load(function () {
alert('iframe loaded');
});
$('#someButton').live('click', function () {
$('body').append($('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>'));
});
采纳答案by Chris
Seems somewhat similiar to the question here:
似乎有点类似于这里的问题：
jQuery .ready in a dynamically inserted iframe
This way the Iframe element exists in the Dom with the append. Only when you set the Url will it load, by which point you've attached the load function you wish to tag on the end. So for your code
这样，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');
});
});
回答by Jasper
The reason your code example does not work is because you are binding to an element that does not exist, then placing that element into the DOM when it has no event handler attached to the loadevent. Try this:
您的代码示例不起作用的原因是因为您绑定到一个不存在的元素，然后在该元素没有附加到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);
});
Or closer to your origional code, you can replace .load()with .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
});
回答by Purag
Try this:
尝试这个：
$("<iframe id='myId'></iframe>").appendTo("body")
.attr('src', url)
.load(function()
{
callback(this);
});
Just added some chaining, created the element where the selector usually goes (this is possible), and appended it to the body.
刚刚添加了一些链接，创建了选择器通常所在的元素（这是可能的），并将其附加到正文中。
回答by nnnnnn
If the document you are loading in the iframe is something you control, try putting the load handler into that document. If you need the parent document to do something after the iframe loads you can call a function in the parent from the child:
如果您在 iframe 中加载的文档是您控制的，请尝试将加载处理程序放入该文档中。如果您需要父文档在 iframe 加载后执行某些操作，您可以从子级调用父级中的函数：
// in parent doc
function myIframeLoaded() {
// do something
}
// in iframe doc
$(document).load(function() { // or .ready()
parent.myIframeLoaded();
}
