iframe子父頁(yè)面調(diào)用js函數(shù)示例
更新時(shí)間：2013年11月07日 17:35:39 作者：
iframe子頁(yè)面調(diào)用父頁(yè)面js函數(shù)及iframe父頁(yè)面調(diào)用子頁(yè)面js函數(shù)在實(shí)際項(xiàng)目中都是很實(shí)用的，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以了解下
1、iframe子頁(yè)面調(diào)用父頁(yè)面js函數(shù)
子頁(yè)面調(diào)用父頁(yè)面函數(shù)只需要寫(xiě)上window.praent就可以了。比如調(diào)用a()函數(shù)，就寫(xiě)成：
window.parent.a();
子頁(yè)面取父頁(yè)面中的標(biāo)簽中的值，比如該標(biāo)簽的id為“test”,則：
window.parent.document.getElementById("test").value;
jQuery方法為：
$(window.parent.document).contents().find("test").val();
但是我在chrome瀏覽器下卻發(fā)現(xiàn)此方法無(wú)效了！查了半天才了解，在chrome 5+中，window.parent無(wú)法在file://協(xié)議中運(yùn)行，但是發(fā)布了之后http://協(xié)議下是可以運(yùn)行的。此方法支持ie、firefox瀏覽器。
2、iframe父頁(yè)面調(diào)用子頁(yè)面js函數(shù)
這個(gè)就稍微復(fù)雜一些，下面的方法支持ie和firefox瀏覽器：
document.getElementById('ifrtest').contentWindow.b();
子頁(yè)面取父頁(yè)面中的標(biāo)簽中的值，比如該標(biāo)簽的id為“test”,則：
document.getElementById("test").value;
注：ifrtest是iframe框架的id，b()為子頁(yè)面js函數(shù)。contentWindow屬性是指定的frame或者iframe所在的window對(duì)象，IE下可以省略。
子頁(yè)面調(diào)用父頁(yè)面函數(shù)只需要寫(xiě)上window.praent就可以了。比如調(diào)用a()函數(shù)，就寫(xiě)成：
復(fù)制代碼 代碼如下:
window.parent.a();
子頁(yè)面取父頁(yè)面中的標(biāo)簽中的值，比如該標(biāo)簽的id為“test”,則：
復(fù)制代碼 代碼如下:
window.parent.document.getElementById("test").value;
jQuery方法為：
$(window.parent.document).contents().find("test").val();
但是我在chrome瀏覽器下卻發(fā)現(xiàn)此方法無(wú)效了！查了半天才了解，在chrome 5+中，window.parent無(wú)法在file://協(xié)議中運(yùn)行，但是發(fā)布了之后http://協(xié)議下是可以運(yùn)行的。此方法支持ie、firefox瀏覽器。
2、iframe父頁(yè)面調(diào)用子頁(yè)面js函數(shù)
復(fù)制代碼 代碼如下:
這個(gè)就稍微復(fù)雜一些，下面的方法支持ie和firefox瀏覽器：
document.getElementById('ifrtest').contentWindow.b();
子頁(yè)面取父頁(yè)面中的標(biāo)簽中的值，比如該標(biāo)簽的id為“test”,則：
document.getElementById("test").value;
注：ifrtest是iframe框架的id，b()為子頁(yè)面js函數(shù)。contentWindow屬性是指定的frame或者iframe所在的window對(duì)象，IE下可以省略。
相關(guān)文章
js實(shí)現(xiàn)json數(shù)據(jù)行到列的轉(zhuǎn)換的實(shí)例代碼
為了實(shí)現(xiàn)這樣的數(shù)據(jù)顯示出來(lái)三個(gè)序列，分別為鄭州、新鄉(xiāng)、安陽(yáng)的電量，就需要自己實(shí)現(xiàn)對(duì)這樣數(shù)據(jù)的轉(zhuǎn)換，轉(zhuǎn)換成如下的形式：2013-08-08
20分鐘打造屬于你的Bootstrap站點(diǎn)，學(xué)會(huì)使用twitter bootstrap建立一個(gè)站點(diǎn)，從而鞏固Bootstrap一系列基礎(chǔ)知識(shí)，感興趣的小伙伴們可以參考一下2016-07-07
前面提到了NodeJS的命令行和Web版之“Hello，World”。命令行是直接執(zhí)行hello.js文件，Web版的需要require http模塊。http模塊是NodeJS自身提供的2012-03-03
js設(shè)置鼠標(biāo)懸停改變背景色實(shí)現(xiàn)詳解
這篇文章主要介紹了js設(shè)置鼠標(biāo)懸停改變背景色實(shí)現(xiàn)詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了JS 圖片壓縮原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了JS 圖片壓縮原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
JavaScript實(shí)現(xiàn)的九種排序算法
這篇文章主要給大家介紹了關(guān)于利用JavaScript實(shí)現(xiàn)的九種排序算法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
微信小程序?qū)崿F(xiàn)點(diǎn)擊出現(xiàn)彈窗
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊出現(xiàn)彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
js 判斷一個(gè)元素是否存在此功能在項(xiàng)目中很實(shí)用，本人搜集整理了一些常用技巧，需要了解的朋友可以參考下2012-12-12
javascript實(shí)現(xiàn)博客園頁(yè)面右下角返回頂部按鈕
這篇文章主要介紹了使用javascript實(shí)現(xiàn)博客園頁(yè)面右下角返回頂部按鈕的思路及源碼，非常不錯(cuò)，這里推薦給小伙伴們2015-02-02
Redux官網(wǎng)上是這樣描述Redux，Redux is a predictable state container for JavaScript apps.（Redux是JavaScript狀態(tài)容器，提供可預(yù)測(cè)性的狀態(tài)管理）。目前Redux GitHub有5w多star，足以說(shuō)明 Redux 受歡迎的程度2021-06-06