如何在iframe在jQuery中完成加載時觸發事件？

33

我很確定它不能完成。

除了PDF以外，還有其他的東西，甚至是Flash。（測試Safari，Firefox 3，IE 7）

太糟糕了。

2008-08-28 17:38:18

198

你試過：

$("#iFrameId").on("load", function() { 
    // do something once the iframe is loaded 
});

來源

2008-08-27 12:55:50 travis

+18

+1因爲雖然這似乎不適用於PDF在iframe中的加載，但它對其他內容類型很有用。 – 2011-03-22 20:36:17

+5

+1它可以在IE8，FF6，Chrome 15上工作+1 – Iladarsda 2011-12-12 11:06:17

+3

+1並不完全是原始提問者想知道的（與pdf相關），但是這個答案確實符合這樣一個問題：「iframe如何觸發事件在jQuery中完成加載？「。謝謝 – 2012-01-16 10:45:23

2

@Alex AW這是一個令人失望。如果在你的iframe你有一個看起來像一個HTML文檔：

<html> 
    <head> 
    <meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" /> 
    </head> 
    <body> 
    </body> 
</html>

絕對是一個黑客，但它可能會爲Firefox瀏覽器。儘管我擔心在這種情況下負載事件是否會過早啓動。

來源

2008-08-28 05:06:20 travis

+0

多數民衆贊成我正在尋找:( – 2011-03-08 14:56:57

0

以下是我爲任何操作所做的工作，它適用於Firefox，IE，Opera和Safari。

<script type="text/javascript"> 
    $(document).ready(function(){ 
    doMethod(); 
    }); 
    function actionIframe(iframe) 
    { 
    ... do what ever ... 
    } 
    function doMethod() 
    { 
    var iFrames = document.getElementsByTagName('iframe'); 

    // what ever action you want. 
    function iAction() 
    { 
     // Iterate through all iframes in the page. 
     for (var i = 0, j = iFrames.length; i < j; i++) 
     { 
     actionIframe(iFrames[i]); 
     } 
    } 

    // Check if browser is Safari or Opera. 
    if ($.browser.safari || $.browser.opera) 
    { 
     // Start timer when loaded. 
     $('iframe').load(function() 
     { 
     setTimeout(iAction, 0); 
     } 
    ); 

     // Safari and Opera need something to force a load. 
     for (var i = 0, j = iFrames.length; i < j; i++) 
     { 
     var iSource = iFrames[i].src; 
     iFrames[i].src = ''; 
     iFrames[i].src = iSource; 
     } 
    } 
    else 
    { 
     // For other good browsers. 
     $('iframe').load(function() 
     { 
     actionIframe(this); 
     } 
    ); 
    } 
    } 
</script>

來源

2008-11-19 14:00:00 user22367

5

$("#iFrameId").ready(function(){ 
    // do something once the iframe is loaded 
});

中有你。就緒嘗試過呢？

來源

2009-06-01 07:51:25 keithics

7

這爲我做（不是PDF，但另一個「onload性」的內容）：

<iframe id="frameid" src="page.aspx"></iframe> 
<script language="javascript"> 
    iframe = document.getElementById("frameid"); 

    WaitForIFrame(); 

    function WaitForIFrame() { 
     if (iframe.readyState != "complete") { 
      setTimeout("WaitForIFrame();", 200); 
     } else { 
      done(); 
     } 
    } 

    function done() { 
     //some code after iframe has been loaded 
    } 
</script>

希望這有助於。

來源

2009-08-28 03:23:37

4

當iframe準備就緒時，使用jquery Load和Ready似乎都沒有真正匹配。

最後我做這樣的事情

$('#iframe').ready(function() { 
    $("#loader").fadeOut(2500, function (sender) { 
     $(sender).remove(); 
    }); 
});

哪裏#loader是在頂部的絕對定位的div有微調GIF的iframe。

來源

2011-05-26 16:42:43

5

我試過一個開箱即用的方法來這個，我還沒有測試這對PDF內容，但它確實爲普通的HTML基於內容的工作，繼承人如何：

步驟1：在一個div包裝你的Iframe包裝器

步驟2：背景圖片添加到您的DIV包裝：

.wrapperdiv{ 
    background-image:url(img/loading.gif); 
    background-repeat:no-repeat; 
    background-position:center center; /*Can place your loader where ever you like */ 
}

步驟3：在你的iframe標記添加ALLOWTRANSPARENCY="false"

這個想法是顯示加載動畫在包裝div直到iframe加載後加載iframe將覆蓋加載動畫。

試試看。

來源

2011-12-14 05:34:32

7

我想這一點，似乎是爲我工作： http://jsfiddle.net/aamir/BXe8C/

更大的PDF文件： http://jsfiddle.net/aamir/BXe8C/1/

來源

2012-07-24 15:27:28

0

我必須證明裝載機，而PDF中的iFrame加載所以我拿出：

loader({href:'loader.gif', onComplete: function(){ 
      $('#pd').html('<iframe onLoad="loader.close();" src="pdf" width="720px" height="600px" >Please wait... your report is loading..</iframe>'); 
    } 
    });

我在顯示裝載機。一旦我確定客戶可以看到我的加載器，我打電話給加載iframe的Compllet加載器方法。 Iframe有一個「onLoad」事件。一旦PDF加載它觸發在那裏我躲在裝載機:) onloat事件

的重要組成部分：

的iFrame有「的onLoad」事件，你可以做你需要（隱藏式裝載機等）

來源

2013-03-21 03:02:48 rinchik

0

如果你能指望瀏覽器的打開/保存界面，彈出用戶一旦下載完成，那麼您可以在開始下載運行此：

$(document).blur(function() { 
    // Your code here... 
});

當對話彈出上的頂部頁面，模糊事件將觸發。

來源

2015-05-23 07:31:03 Ethan

0

由於PDF文件被加載後，iframe的文檔將有一個新的DOM元素<embed/>，所以我們可以做這樣的檢查：

window.onload = function() { 


    //creating an iframe element 
    var ifr = document.createElement('iframe'); 
    document.body.appendChild(ifr); 

    // making the iframe fill the viewport 
    ifr.width = '100%'; 
    ifr.height = window.innerHeight; 

    // continuously checking to see if the pdf file has been loaded 
    self.interval = setInterval(function() { 
     if (ifr && ifr.contentDocument && ifr.contentDocument.readyState === 'complete' && ifr.contentDocument.embeds && ifr.contentDocument.embeds.length > 0) { 
      clearInterval(self.interval); 

      console.log("loaded"); 
      //You can do print here: ifr.contentWindow.print(); 
     } 
    }, 100); 

    ifr.src = src; 
}

來源

2016-04-07 07:03:07

0

我已經申請到這種情況的解決方案是簡單在DOM中放置一個絕對加載圖像，在iframe加載後，該圖像將被iframe圖層覆蓋。

iframe的z-index應該是（加載的z-index + 1），或者更高。

例如：

.loading-image { position: absolute; z-index: 0; } 
.iframe-element { position: relative; z-index: 1; }

希望這會幫助，如果沒有JavaScript解決方案一樣。我認爲CSS是這些情況的最佳實踐。

此致敬禮。

來源

2016-06-22 10:46:58 ElaAle

如何在iframe在jQuery中完成加載時觸發事件？

回答

相關問題