jQuery iframe load() 事件?

IT技术 javascript ajax jquery iframe
2021-02-07 16:49:48

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

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

6个回答

使用iframe onload 事件

$('#theiframe').on("load", function() {
    alert(1);
});
从 JQuery 1.7(2011 年 11 月)开始,您应该使用$('#theiframe').on("load",function()).
2021-03-20 16:49:48
不要忘记关闭});:)
2021-03-21 16:49:48
这似乎没有触发。
2021-04-09 16:49:48

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

在主文档中:

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

在 iframe 文档中:

window.onload = function() {
    parent.iframeLoaded();
}
看来我的双重加载问题是我将 iframe 包装在 DIV 标签之间。出于某种奇怪的原因,如果您这样做,浏览器会重新加载 iframe...
2021-03-19 16:49:48
@Alex:您需要确保该函数是全局的,您可以通过在为ready()函数内部的变量赋值之前将其声明为全局作用域中的变量,或者通过显式分配它作为window在你的ready()函数里面例如:$(document).ready(function() { window.iframeLoaded = function() { alert("Load"); }; /* Other stuff here */ });
2021-03-23 16:49:48
我不明白它是如何工作的 :( 但毕竟它对我有用 >> window.onload = function() { parent.iframeLoaded(); } function iframeLoaded() { } var postTempBody = "${postTempBody}" ; /*填充正文值*/ if(postTempBody != ''){ window.iframeLoaded = function() { var $iframe = jQuery('#tinyMceEditor_ifr'); alert($iframe.length); $iframe.ready( function() { $iframe.contents().find("body").append(postTempBody); }); }; }
2021-03-29 16:49:48
嘿,这有效!但是如何调用jQuery(document).ready父文档函数中的函数呢?
2021-03-30 16:49:48
@Alex:当然,如果您隐藏和显示 iframe 或在 DOM 中移动它,某些浏览器会重新加载 iframe 文档。
2021-04-03 16:49:48

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

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

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

$(window).on('load', function() { ... });
这是唯一对我有用的解决方案。我拒绝使用 cookie 来处理这个问题。
2021-04-11 16:49:48

这与我见过的行为相同:iframeload()将首先在空 iframe 上触发,然后在您的页面加载时第二次触发。

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

如果我alert($(this).attr('src'));在加载函数中添加,我会得到两次相同的值......
2021-03-22 16:49:48

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