jQuery iframe load()事件？

Question

有谁知道是否有这样的事情？

我有一个插入的iframe,$.ajax()我想在iframe的内容完全加载后做一些事情:

....
 success: function(html){  // <-- html is the IFRAME (#theiframe)
          $(this).html(html);   // $(this) is the container element
          $(this).show();
          $('#theiframe').load(function(){
             alert('loaded!');
          } 
....

它工作,但我看到IFRAME被加载两次(警报也显示两次).

Answer 1

使用iframe onload事件

$('#theiframe').on("load", function() {
    alert(1);
});

Answer 2

如果可能的话,最好load在iframe的文档中处理事件并调用包含文档中的函数.这具有在所有浏览器中工作并且仅运行一次的优点.

在主要文件中:

function iframeLoaded() {
    alert("Iframe loaded!");
}

在iframe文档中:

window.onload = function() {
    parent.iframeLoaded();
}

Answer 3

按照Tim Down的回答,但利用jQuery(由OP提到)并松散地耦合包含页面和iframe,您可以执行以下操作:

在iframe中:

<script>
    $(function() {
        var w = window;
        if (w.frameElement != null
                && w.frameElement.nodeName === "IFRAME"
                && w.parent.jQuery) {
            w.parent.jQuery(w.parent.document).trigger('iframeready');
        }
    });
</script>

在包含页面中:

<script>
    function myHandler() {
        alert('iframe (almost) loaded');
    }
    $(document).on('iframeready', myHandler);
</script>

iframe在(可能存在的)父窗口的文档上触发事件 - 请注意父文档需​​要一个自己的jQuery实例才能使其工作.然后,在父窗口中附加处理程序以响应该事件.

此解决方案的优点是,当包含页面不包含预期的负载处理程序时不会中断.更一般地说,了解其周围环境不应该成为iframe的关注点.

请注意,我们正在利用DOM ready事件来触发事件 - 这应该适用于大多数用例.如果不是,只需将事件触发线附加到窗口的加载事件,如下所示:

$(window).on('load', function() { ... });