jQuery iframe 加载（）事件？答案

【问题标题】：jQuery iframe load() event?jQuery iframe 加载（）事件？
【发布时间】：2011-08-12 21:49:13
【问题描述】：

有没有人知道有没有这样的事情？

我有一个使用$.ajax() 插入的 iframe，我想在 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 加载了两次（警报也显示了两次）。

【问题讨论】：

在将 iframe 附加到 DOM 之前尝试设置 iframe 的 src。这应该可以防止加载事件触发两次。

标签： javascript ajax jquery iframe

【解决方案1】：

使用iframe onload event

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

【讨论】：

从 JQuery 1.7（2011 年 11 月）开始，您应该使用 $('#theiframe').on("load",function())。
这似乎没有触发。
别忘了关闭}); :)

【解决方案2】：

如果可能，您最好处理 iframe 文档中的 load 事件并调用包含文档中的函数。这样做的好处是可以在所有浏览器中运行，并且只运行一次。

在主文档中：

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

在 iframe 文档中：

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

【讨论】：

嘿，这行得通！但是如何调用父文档的jQuery(document).ready 函数内的函数呢？
@Alex：您需要确保该函数是全局的，您可以通过在为 ready() 中的变量赋值之前将其声明为全局范围内的变量来做到这一点函数，或者通过在 ready() 函数中明确地将其分配为 window 的属性。例如：$(document).ready(function() { window.iframeLoaded = function() { alert("Load"); }; /* Other stuff here */ });
看来我的双重加载问题是我将 iframe 包装在 DIV 标签之间。由于某些奇怪的原因，如果您这样做，浏览器会重新加载 iframe...
@Alex：如果你隐藏和显示 iframe，或者在 DOM 中移动它，当然有些浏览器会重新加载 iframe 文档。
我不明白它是如何工作的 :( 但感谢它对我有用 >> window.onload = function() { parent.iframeLoaded(); } function iframeLoaded() { } var postTempBody = "${postTempBody}"; /*填充正文值*/ if(postTempBody != ''){ window.iframeLoaded = function() { var $iframe = jQuery('#tinyMceEditor_ifr'); alert($iframe.长度); $iframe.ready(function() { $iframe.contents().find("body").append(postTempBody); }); }; }

【解决方案3】：

按照Tim Down's answer 的思路，但利用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 就绪事件来触发该事件 - 这应该适用于大多数用例。如果不是，只需将事件触发线附加到窗口的加载事件，如下所示：

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

【讨论】：

这是唯一对我有用的解决方案。我拒绝使用 cookie 来处理这个问题。

【解决方案4】：

这与我看到的行为相同：iframe 的 load() 将首先在空 iframe 上触发，然后在您的页面加载时第二次触发。

编辑：嗯，很有趣。您可以在事件处理程序中增加一个计数器，并且 a) 忽略第一个 load 事件，或 b) 忽略任何重复的 load 事件。

【讨论】：

如果我在加载函数中添加alert($(this).attr('src'));，我会得到两次相同的值...

【解决方案5】：

iframe + animate 中没有代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">

function resizeIframe(obj) {

    jQuery(document).ready(function($) {

        $(obj).animate({height: obj.contentWindow.document.body.scrollHeight + 'px'}, 500)

    });

}    
</script>
<iframe width="100%" src="iframe.html" height="0" frameborder="0" scrolling="no" onload="resizeIframe(this)" >

【讨论】：

【解决方案6】：

你可以使用jquery的Contents方法来获取iframe的内容。

【讨论】：

【解决方案7】：

如果你想让它更通用和独立，你可以使用cookie。 iframe 内容可以设置 cookie。使用 jquery.cookie 和计时器（或在本例中为 javascript 计时器），您可以检查是否每秒左右设置 cookie。

//token should be a unique random value which is also sent to ifame to get set
iframeLoadCheckTimer = window.setInterval(function () {
        cookieValue = $.cookie('iframeToken');  
        if (cookieValue == token)
        {
            window.clearInterval(iframeLoadCheckTimer );
            $.cookie('iframeToken', null, {
                expires: 1, 
                path: '/'
         });
        }
 }, 1000);

【讨论】：