JavaScript-jQuery iframe load()事件?

有谁知道这件事吗?

我有一个要插入$.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加载了两次(警报也显示了两次)。

Alex asked 2020-02-14T02:00:05Z
7个解决方案
56 votes

使用iframe onload事件

$('#theiframe').on("load", function() {
    alert(1);
});
m-khonsari answered 2020-02-14T02:13:58Z
55 votes

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

在主文件中:

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

在iframe文档中:

window.onload = function() {
    parent.iframeLoaded();
}
Tim Down answered 2020-02-14T02:13:38Z
6 votes

按照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的周围环境不应该成为iframe的关注。

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

$(window).on('load', function() { ... });
Oliver answered 2020-02-14T02:14:42Z
3 votes

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

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

Piskvor answered 2020-02-14T02:15:07Z
2 votes

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

suhair answered 2020-02-14T02:15:28Z
2 votes

如果您希望它更加通用和独立,则可以使用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);
Bahadır Birsöz answered 2020-02-14T02:15:49Z
2 votes

在iframe中没有代码+制作动画:

<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)" >
Jérome Obbiet answered 2020-02-14T02:16:11Z
translate from https://stackoverflow.com:/questions/5788499/jquery-iframe-load-event