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