jQuery iframe的load()事件?

有没有人知道是否有这样的事情?

我有一个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加载两次(该警报也显示两次)。

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

在主文档中:

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

在iframe文件中:

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

使用iframe onload事件

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

沿着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实例才能工作。 然后,在父窗口中附加一个处理程序来对该事件作出反应。

这个解决scheme的优点是不会中断包含页面不包含预期的负载处理程序。 更一般地说,不应该是iframe关心周围的环境。

请注意,我们正在利用DOM就绪事件来触发事件 – 这应该适用于大多数使用情况。 如果不是,只需将事件触发线附加到窗口的加载事件,如下所示:

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

这是我见过的相同的行为:iframe的load()将首先触发一个空的iframe,然后第二次加载页面。

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

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

如果你希望它更通用和独立,你可以使用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); 

在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)" >