问题 jQuery onload - .load() - 事件不能与动态加载的iframe一起使用


我的脚本在用户单击按钮时加载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>'));
});

6167
2017-11-22 20:21


起源



答案:


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

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

});

11
2017-11-22 20:25



我遇到了与Firefox类似的错误。具体来说,如果是新的 iframe 元素被创建并插入到DOM中 src 属性未指定, load 事件仍将开火。我详细介绍了我的用例并解决了任何人遇到同样的问题: web.onassar.com/blog/2013/03/03/... - onassar


答案:


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

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

});

11
2017-11-22 20:25



我遇到了与Firefox类似的错误。具体来说,如果是新的 iframe 元素被创建并插入到DOM中 src 属性未指定, load 事件仍将开火。我详细介绍了我的用例并解决了任何人遇到同样的问题: web.onassar.com/blog/2013/03/03/... - onassar


您的代码示例不起作用的原因是因为您绑定到一个不存在的元素,然后在没有附加事件处理程序的情况下将该元素放入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);
});

或者更接近您的原始代码,您可以替换 .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
});

1
2017-11-22 20:33





尝试这个:

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

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


1
2017-11-22 20:35





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

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

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

0
2017-11-22 20:33