前言
在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事件，我們永遠監聽不到它完成，所以這點比較需要注意一些。
沒有留言:
張貼留言