2012年6月3日

監聽Iframe onload事件



前言

在Web2.0這個時代上,許許多多的網站應用都內嵌(iframe)了許多第三方的內容在自己的網站上,剛好最近專案上也在處理一些Iframe相關的問題就做了一些筆記,今天要解決的問題是如何偵測網頁上Iframe載入完成(onload)的事件,提出的解決方法有兩種,分別為jQuery方法與純javascript方法。


畫面(View)

假設我們的畫面中有個iframe,名字叫做myIframe,將會加載其他網頁的資料到我們的網站上,程式碼如下

<body> <iframe id="myIframe" src="http://yahoo.com.tw"/> </body>

jQuery解法

在jQuery中,我們可以直接使用load方法監聽iframe的onload事件,程式碼如下

$(document).ready(function(){ // jQuery 方法 $("#myIframe").load(function(){ alert(); }); });

JavaScript

如果你的專案沒有使用jQuery,一定要使用JavaScript,這裡提供一個跨瀏覽器的解法,在IE中Iframe雖然有定義onload事件,但是它並不會在iframe載入完成時觸發,這實在是一個很奇怪的BUG,不過沒關係你可以自己替它綁上,實作程式碼如下

$(document).ready(function(){ // javaScript 方法 var iframe = document.getElementById("myIframe"); if (iframe.attachEvent){ iframe.attachEvent("onload", function(){ alert("Local iframe is now loaded."); }); } else { iframe.onload = function(){ alert("Local iframe is now loaded."); }; } document.body.appendChild(iframe); });

總結

不論是在同網域或是跨網域,Iframe都可以取得onload事件並觸發;但是有個情況是無法避免的,假設內嵌的內容程式是有問題的,導致沒辦法讓網頁讀取完成,納這時候就Iframe內部就不會產生onload事件,我們永遠監聽不到它完成,所以這點比較需要注意一些。


沒有留言:

ShareThis