快捷導(dǎo)航

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

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

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

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

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

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

parent.html父頁面：

復(fù)制代碼代碼如下:

<html> 

<head> 

<script type="text/javascript"> 

　　function parent_click(){ 

　　　　alert("來自父頁面"); 

　　} 

</script> 

</head> 

<body> 

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

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

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

</body> 

</html>

child.html子頁面：

復(fù)制代碼代碼如下:

<html> 

<head> 

<script type="text/javascript"> 

　　function child_click(){ 

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

　　} 

</script> 

</head> 

<body> 

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

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

</body> 

</html>

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

您可能感興趣的文章:

相關(guān)文章

JS獲取當(dāng)前腳本文件的絕對路徑
這篇文章主要介紹了JS獲取當(dāng)前腳本文件的絕對路徑的相關(guān)資料，感興趣的小伙伴們可以參考一下
2016-03-03
js導(dǎo)出Excel表格超出26位英文字符的解決方法ES6
下面小編就為大家?guī)硪黄猨s導(dǎo)出Excel表格超出26位英文字符的解決方法ES6。具有很好的參考價值。一起跟隨小編過來看看吧，希望對大家有所幫助
2017-11-11
js實現(xiàn)1,2,3,5數(shù)字按照概率生成
這篇文章主要介紹了js實現(xiàn)1,2,3,5數(shù)字按照概率生成,需要的朋友可以參考下
2017-09-09
js中利用tagname和id獲取元素的方法
這篇文章主要介紹了js中利用tagname和id獲取元素的方法，主要包括三種方法,需要的朋友可以參考下
2016-01-01
JS中節(jié)流和防抖函數(shù)的實現(xiàn)及區(qū)別示例
這篇文章主要為大家介紹了JS中節(jié)流和防抖函數(shù)的實現(xiàn)及使用區(qū)別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
layui radio點擊事件實現(xiàn)input顯示和隱藏的例子
今天小編就為大家分享一篇layui radio點擊事件實現(xiàn)input顯示和隱藏的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
event.x,event.clientX,event.offsetX區(qū)別
event.x,event.clientX,event.offsetX區(qū)別,需要的朋友可以參考下。
2006-11-11
js實現(xiàn)獲取當(dāng)前時間是本月第幾周的方法
這篇文章主要介紹了js實現(xiàn)獲取當(dāng)前時間是本月第幾周的方法,涉及javascript針對日期及時間的相關(guān)操作技巧,非常簡單實用,需要的朋友可以參考下
2015-08-08
Javascript 鍵盤事件的組合使用實現(xiàn)代碼
Javascript 鍵盤事件的組合使用實現(xiàn)代碼，需要的朋友可以參考下
2012-05-05
利用原生js實現(xiàn)html5小游戲之打磚塊（附源碼）
這篇文章主要給大家介紹了關(guān)于利用原生js實現(xiàn)html5小游戲之打磚塊的相關(guān)資料，這是最近工作遇到的一個小需求，文中通過示例代碼介紹的非常詳細(xì)，并分享了完整的源碼供大家參考學(xué)習(xí)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-01-01