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倒計(jì)時(shí)顯示的實(shí)例，需要的朋友可以參考借鑒，下面就跟小編一起來(lái)看看吧2016-12-12
JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片滾動(dòng)附源碼下載
JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片滾動(dòng)，9張圖告訴你，C羅欲哭無(wú)淚，另附源碼下載，方便學(xué)習(xí)2014-06-06
根據(jù) W3C DOM 2 Events 描述，EventTarget 接口被所有支持 DOM 事件模型的節(jié)點(diǎn)（Node）實(shí)現(xiàn)。 該接口提供addEventListener 和removeEventListener方法，用來(lái)綁定或解綁一個(gè) EventListeners 接口到一個(gè) EventTarget。2010-10-10
為了提高網(wǎng)站的加載速度，有一個(gè)很重要的手段就是在用戶瀏覽過(guò)程中的上游網(wǎng)站做一個(gè)文件的預(yù)加載。2010-04-04
下面小編就為大家?guī)?lái)一篇限制只能輸入數(shù)字的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-05-05
詳解js正則表達(dá)式驗(yàn)證時(shí)間格式xxxx-xx-xx形式
本篇文章主要介紹了詳解js正則表達(dá)式驗(yàn)證時(shí)間格式xxxx-xx-xx形式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
PHP配置文件php.ini中打開(kāi)錯(cuò)誤報(bào)告的設(shè)置方法
這篇文章主要介紹了PHP配置文件php.ini中打開(kāi)錯(cuò)誤報(bào)告的設(shè)置方法,需要的朋友可以參考下2015-01-01
layui點(diǎn)擊左側(cè)導(dǎo)航欄,實(shí)現(xiàn)不刷新整個(gè)頁(yè)面,只刷新局部的方法
今天小編就為大家分享一篇layui點(diǎn)擊左側(cè)導(dǎo)航欄,實(shí)現(xiàn)不刷新整個(gè)頁(yè)面,只刷新局部的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
前端React?Nextjs中的TS類型過(guò)濾實(shí)用技巧
今天就來(lái)介紹一個(gè)在其它開(kāi)源庫(kù)中見(jiàn)到的既花里胡哨，又實(shí)用的TS類型——TS類型過(guò)濾，你會(huì)發(fā)現(xiàn)這些?TS騷操作真的很重要，因?yàn)樗芎芎玫貛椭阕鲮o態(tài)類型校驗(yàn)2022-04-04
JavaScript實(shí)現(xiàn)表格點(diǎn)擊排序的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)表格點(diǎn)擊排序的方法,可實(shí)現(xiàn)點(diǎn)擊頂部數(shù)據(jù)項(xiàng)標(biāo)題實(shí)現(xiàn)對(duì)應(yīng)數(shù)據(jù)列的排序效果,涉及javascript鼠標(biāo)事件及數(shù)據(jù)排序的技巧,需要的朋友可以參考下2015-05-05