iframe子頁面與父頁面在同域或不同域下的js通信
更新時間:2014年05月07日 09:04:04 作者:
根據(jù)iframe中src屬性是同域鏈接還是跨域鏈接,通信方式也不同,下面有個不錯的示例,需要的朋友可以參考下
iframe子頁面與父頁面通信根據(jù)iframe中src屬性是同域鏈接還是跨域鏈接,通信方式也不同。
一、同域下父子頁面的通信
父頁面parent.html
<html>
<head>
<script type="text/javascript">
function say(){
alert("parent.html");
}
function callChild(){
myFrame.window.say();
myFrame.window.document.getElementById("button").value="調(diào)用結束";
}
</script>
</head>
<body>
<input id="button" type="button" value="調(diào)用child.html中的函數(shù)say()" onclick="callChild()"/>
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html>
子頁面child.html
<html>
<head>
<script type="text/javascript">
function say(){
alert("child.html");
}
function callParent(){
parent.say();
parent.window.document.getElementById("button").value="調(diào)用結束";
}
</script>
</head>
<body>
<input id="button" type="button" value="調(diào)用parent.html中的say()函數(shù)" onclick="callParent()"/>
</body>
</html>
方法調(diào)用
父頁面調(diào)用子頁面方法:FrameName.window.childMethod();
子頁面調(diào)用父頁面方法:parent.window.parentMethod();
DOM元素訪問
獲取到頁面的window.document對象后,即可訪問DOM元素
注意事項
要確保在iframe加載完成后再進行操作,如果iframe還未加載完成就開始調(diào)用里面的方法或變量,會產(chǎn)生錯誤。判斷iframe是否加載完成有兩種方法:
1. iframe上用onload事件
2. 用document.readyState=="complete"來判斷
二、跨域父子頁面通信方法
如果iframe所鏈接的是外部頁面,因為安全機制就不能使用同域名下的通信方式了。
父頁面向子頁面?zhèn)鬟f數(shù)據(jù)
實現(xiàn)的技巧是利用location對象的hash值,通過它傳遞通信數(shù)據(jù)。在父頁面設置iframe的src后面多加個data字符串,然后在子頁面中通過某種方式能即時的獲取到這兒的data就可以了,例如:
1. 在子頁面中通過setInterval方法設置定時器,監(jiān)聽location.href的變化即可獲得上面的data信息
2. 然后子頁面根據(jù)這個data信息進行相應的邏輯處理
子頁面向父頁面?zhèn)鬟f數(shù)據(jù)
實現(xiàn)技巧就是利用一個代理iframe,它嵌入到子頁面中,并且和父頁面必須保持是同域,然后通過它充分利用上面第一種通信方式的實現(xiàn)原理就把子頁面的數(shù)據(jù)傳遞給代理iframe,然后由于代理的iframe和主頁面是同域的,所以主頁面就可以利用同域的方式獲取到這些數(shù)據(jù)。使用 window.top或者window.parent.parent獲取瀏覽器最頂層window對象的引用。
一、同域下父子頁面的通信
父頁面parent.html
復制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
function say(){
alert("parent.html");
}
function callChild(){
myFrame.window.say();
myFrame.window.document.getElementById("button").value="調(diào)用結束";
}
</script>
</head>
<body>
<input id="button" type="button" value="調(diào)用child.html中的函數(shù)say()" onclick="callChild()"/>
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html>
子頁面child.html
復制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
function say(){
alert("child.html");
}
function callParent(){
parent.say();
parent.window.document.getElementById("button").value="調(diào)用結束";
}
</script>
</head>
<body>
<input id="button" type="button" value="調(diào)用parent.html中的say()函數(shù)" onclick="callParent()"/>
</body>
</html>
方法調(diào)用
父頁面調(diào)用子頁面方法:FrameName.window.childMethod();
子頁面調(diào)用父頁面方法:parent.window.parentMethod();
DOM元素訪問
獲取到頁面的window.document對象后,即可訪問DOM元素
注意事項
要確保在iframe加載完成后再進行操作,如果iframe還未加載完成就開始調(diào)用里面的方法或變量,會產(chǎn)生錯誤。判斷iframe是否加載完成有兩種方法:
1. iframe上用onload事件
2. 用document.readyState=="complete"來判斷
二、跨域父子頁面通信方法
如果iframe所鏈接的是外部頁面,因為安全機制就不能使用同域名下的通信方式了。
父頁面向子頁面?zhèn)鬟f數(shù)據(jù)
實現(xiàn)的技巧是利用location對象的hash值,通過它傳遞通信數(shù)據(jù)。在父頁面設置iframe的src后面多加個data字符串,然后在子頁面中通過某種方式能即時的獲取到這兒的data就可以了,例如:
1. 在子頁面中通過setInterval方法設置定時器,監(jiān)聽location.href的變化即可獲得上面的data信息
2. 然后子頁面根據(jù)這個data信息進行相應的邏輯處理
子頁面向父頁面?zhèn)鬟f數(shù)據(jù)
實現(xiàn)技巧就是利用一個代理iframe,它嵌入到子頁面中,并且和父頁面必須保持是同域,然后通過它充分利用上面第一種通信方式的實現(xiàn)原理就把子頁面的數(shù)據(jù)傳遞給代理iframe,然后由于代理的iframe和主頁面是同域的,所以主頁面就可以利用同域的方式獲取到這些數(shù)據(jù)。使用 window.top或者window.parent.parent獲取瀏覽器最頂層window對象的引用。
相關文章
基于JS實現(xiàn)橫線提示輸入驗證碼隨驗證碼輸入消失(js驗證碼的實現(xiàn))
最近在開微信的頁面,在項目需求中遇到之前沒有做過的功能,要求橫線提示輸入驗證碼隨驗證碼輸入橫線消失,基于js怎么實現(xiàn)的呢?下面小編給大家分享基于js實現(xiàn)驗證碼功能,感興趣的朋友一起看看吧2016-10-10
bootstrap-table實現(xiàn)表頭固定以及列固定的方法示例
這篇文章主要介紹了bootstrap-table實現(xiàn)表頭固定以及列固定的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
微信小程序webview組件交互,內(nèi)聯(lián)h5頁面并網(wǎng)頁實現(xiàn)微信支付實現(xiàn)解析
這篇文章主要介紹了小程序webview組件交互,內(nèi)聯(lián)h5頁面并網(wǎng)頁實現(xiàn)微信支付實現(xiàn)解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
JavaScript分步實現(xiàn)一個出生日期的正則表達式
本文把出生日期分割成幾個部分,分步地介紹了實現(xiàn)一個出生日期校驗的完整過程。對出生日期正則表達式感興趣的朋友參考下吧2018-03-03
詳解JavaScript如何控制并發(fā)請求數(shù)量
某些情況下,我們可能需要對需要執(zhí)行的多個異步任務進行異步數(shù)量控制,只允許固定數(shù)量的任務執(zhí)行,本文為大家整理了JS控制并發(fā)請求數(shù)量的相關代碼,希望對大家有所幫助2024-01-01
cookie丟失問題(認證失效) Authentication (用戶驗證信息)也會丟失
window.showModalDialog() 后 window.open() 導致cookie丟失問題(認證失效) Authentication (用戶驗證信息)也會丟失2009-06-06

