jQuery iframe load（）事件？

Question

有誰知道是否有這樣的事情？

我有一個用$.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被加載兩次（警報也顯示兩次）。

Answer 1

使用iframe onload事件

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

Answer 2

如果可能的話，最好在iframe文檔中處理load事件並調用包含文檔中的函數。 這具有在所有瀏覽器中工作並且僅運行一次的優點。

在主要文件中：

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

在iframe文檔中：

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

Answer 3

按照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的關注點。

請注意，我們正在利用DOM ready事件來觸發事件 - 這應該適用於大多數用例。 如果不是，只需將事件觸發線附加到窗口的加載事件，如下所示：

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

Answer 4

這與我見過的行為相同：iframe的load()將首先在空的iframe上觸發，然后第二次在您的頁面加載時觸發。

編輯：嗯，有趣。 您可以在事件處理程序中遞增計數器，並a）忽略第一個load事件，或b）忽略任何重復的load事件。

Answer 5

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

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

Answer 7

您可以使用jquery的Contents方法來獲取iframe的內容。