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