iframe父子頁面通信
阿新 • • 發佈:2017-08-26
onload 毫秒 pan java size ber 註釋 設備 out
一、同域下父子頁面的通信
1.父頁面調用子iframe頁面
(1)通過iframe的Id獲取子頁面的dom,然後通過內置屬性contentWindow取得子窗口的window對象,此方法兼容各個瀏覽器
document.getElementById(‘iframe_Id‘).contentWindow // contentWindow 不能省略
(2)通過iframe的name直接獲取子窗口的window對象
iframe_Name.window //window可以省略
(3)通過window對象的frames[]數組對象直接獲取子frame對象
window.frames[0] 或者 window.frames["iframe_Name"]
2.子iframe頁面調用父頁面
(1)通過parent或top對象獲取父頁面的window對象
parent.window 或者 top.window //window 可以省略
3.主頁面內兄弟iframe頁面之間的相互調用
(1)同域下各個iframe窗口之間的元素和方法可以共享
4.父頁面中檢測子iframe的加載情況
(1)子iframe的onload事件
if (window.attachEvent) {//IE10及以前版本
document.getElementById( ‘Id‘).attachEvent(‘onload‘, function () {
mini.alert(‘IE‘);
});
} else if (window.addEventListener) {//所有主流瀏覽器除了IE10及以前版本
$(‘#Id‘)[0].addEventListener(‘load‘, function () {
mini.alert(‘ss‘);
});
}
(2)使用定時器捕獲子iframe的加載狀態
var iFrm = document.getElementById(‘Id‘);
var fmState = function () {
if(document.readyState){//document.readyState用於判斷文件是否加載完成,只讀,firefox不支持
var state = iFrm.contentWindow.document.readyState;
if(state == "complete"){ return;}
window.setTimeout(fmState, 10);
}
}
//在改變src或者通過form target提交表單時,執行語句:
if (fmState.TimeoutI){ window.clearTimeout(fmState.timeoutI);}
fmState.timeoutI = window.setTimeout(fmState, 400);
註釋:
1.延遲400毫秒的原因?
答:因為javascript對DOM的操作是異步的,我們必須等待腳本對DOM落實執行後才開始下一步。
400秒這個數取決與客戶端的設備和瀏覽器的響應速度,好的設備的響應速度能在10毫秒以內甚
至更快,但100毫秒左右可能比較大眾化,400毫秒應該是十分保守的了。
總之,較大的毫秒數能適合更多的用戶設備狀況,並能減少了客戶端設備的工作量。
二、跨域下父子頁面的通信
1.暫時未涉及待定
iframe父子頁面通信