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文档中的load事件并调用包含文档中的函数。这样做的好处是可以在所有浏览器中使用，只运行一次。

在主要文件中：

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

在iframe文档中：

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

Answer 2

使用iframe onload event

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

Answer 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 ready事件来触发事件 - 这应该适用于大多数用例。如果不是，只需将事件触发线附加到窗口的加载事件，如下所示：

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

Answer 4

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

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

Answer 5

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

Answer 6

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

Answer 7

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

jQuery iframe load（）事件？

7 个答案: