jQuery onload - .load() -事件不使用动态加载的iframe

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确实正常加载，但是在iframe加载完成之后，.load()事件永远不会被调用。iframe包含来自同一网站的内容(没有外部内容)。奇怪的是，我在代码的其他一些地方使用了下面描述的相同技术，并且它工作得非常完美。谁能告诉我下一步该检查什么吗?

Here's the relevant code:

4 个解决方案

#1

Seems somewhat similiar to the question here:

这个问题似乎有点相似:

jQuery .ready in a dynamically inserted iframe

准备在动态插入的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时，它才会被加载，此时您已经附加了希望在末尾标记的load函数。所以对于你的代码

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

});

#2

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 load event. Try this:

代码示例无法工作的原因是，您正在绑定一个不存在的元素，然后将该元素放在DOM中，当它没有附加到load事件的事件处理程序时。试试这个:

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

或者更接近您的定向代码，您可以用.live('load')替换.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
});

#3

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.

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

#4

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

#1