js實現(xiàn)iframe跨頁面調用函數(shù)的方法

更新時間：2014年12月13日 11:55:35 投稿：shichen2014

這篇文章主要介紹了js實現(xiàn)iframe跨頁面調用函數(shù)的方法,實例展示了iframe中父頁面調用子頁面和子頁面調用父頁面的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了js實現(xiàn)iframe跨頁面調用函數(shù)的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

在項目中難免會遇到這樣一個問題就是頁面引入了IFrame并且需要父頁面調用子頁面函數(shù)或者子頁面需要調用父頁面函數(shù)。比如說：現(xiàn)在有兩個頁面parent.html和child.html。其中parent.html中含有IFrame并且IFrame指向child.html?，F(xiàn)在需要在parent.html/child.html中調用child.html/parent.html的一個js方法。

具體的代碼實現(xiàn)如下：

parent.html父頁面：

復制代碼代碼如下:

<html> 

<head> 

<script type="text/javascript"> 

　　function parent_click(){ 

　　　　alert("來自父頁面"); 

　　} 

</script> 

</head> 

<body> 

　　<input type="button" value="調用本頁面函數(shù)" onclick="parent_click();" /> 

　　<input type="button" value="調用子頁面函數(shù)" onclick='window.frames["childPage"].child_click();' /> 

　　<iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe> 

</body> 

</html>

child.html子頁面：

復制代碼代碼如下:

<html> 

<head> 

<script type="text/javascript"> 

　　function child_click(){ 

　　　　alert("調用的子頁面函數(shù)"); 

　　} 

</script> 

</head> 

<body> 

　　<input type="button" value="調用父頁面函數(shù)" onclick='parent.window.parent_click();' /> 

　　<input type="button" value="調用本頁面函數(shù)" onclick="child_click();" /> 

</body> 

</html>

希望本文所述對大家基于javascript的web程序設計有所幫助。

您可能感興趣的文章:

Javascript 強制類型轉換函數(shù)
javascript是弱類型的語言，所以強制類型轉換還是比較重要的，下面看一下它的幾個強制轉換的函數(shù)
2009-05-05
解決前后端交互數(shù)據(jù)出現(xiàn)精度丟失的多種方式
這篇文章主要為大家介紹了解決前后端交互數(shù)據(jù)出現(xiàn)精度丟失的多種方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-04-04
JavaScript創(chuàng)建數(shù)組的方法詳解
這篇文章主要為大家介紹了JavaScript創(chuàng)建數(shù)組的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
淺談js對象屬性通過點(.) 和方括號([]) 的不同之處
下面小編就為大家?guī)硪黄獪\談js對象屬性通過點(.) 和方括號([]) 的不同之處。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
在一個瀏覽器里呈現(xiàn)所有瀏覽器測試結果的前端測試工具的思路
對前端工程師來說,跨瀏覽器的兼容性問題一直是最頭疼的,測試一個小小的東西,就要打開N個瀏覽器,然后比較來比較去,記錄個瀏覽器的數(shù)據(jù),比較不同,實在是麻煩.
2010-03-03
JavaScript的setAttribute兼容性問題解決方法
JavaScript的setAttribute存在兼容性問題，下面與大家分享下具體的解決方法，感興趣的朋友可以參考下
2013-11-11
javascript 關鍵字高亮顯示實現(xiàn)代碼
屏蔽HTML標簽，支持多關鍵字（以空格間隔），關鍵字內可含有特殊字符
2010-09-09
JavaScript常用腳本匯總（三）
本文給大家分享的常用腳本有通過數(shù)組，拓展字符串拼接容易導致性能的問題、頁面視口滾動條的位置的輔助函數(shù)、調節(jié)元素透明度的函數(shù)、獲取鼠標位置的幾個通用的函數(shù)、使用cssdisplay屬性來切換元素可見性的一組函數(shù)、樣式相關的通用函數(shù)、獲取元素當前的高度和寬度。
2015-03-03
使用KrpanoToolJS在瀏覽器切圖的實例詳解
這篇文章主要介紹了使用KrpanoToolJS在瀏覽器切圖的實例詳解,大概是需要在瀏覽器中將全景圖轉為立方體圖、多層級瓦片圖，通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-10-10
js showModalDialog參數(shù)的使用詳解
本篇文章主要是對js中showModalDialog參數(shù)的使用進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01