js實現iframe跨頁面調用函數的方法

2019-11-20 13:45:23

字體：大中小

來源：轉載

供稿：網友

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

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

具體的代碼實現如下：

parent.html父頁面：

復制代碼代碼如下:

<html> 
<head> 
<script type="text/javascript"> 
　　function parent_click(){ 
　　　　alert("來自父頁面"); 
　　} 
</script> 
</head> 
<body> 
　　<input type="button" value="調用本頁面函數" onclick="parent_click();" /> 
　　<input type="button" value="調用子頁面函數" 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("調用的子頁面函數"); 
　　} 
</script> 
</head> 
<body> 
　　<input type="button" value="調用父頁面函數" onclick='parent.window.parent_click();' /> 
　　<input type="button" value="調用本頁面函數" onclick="child_click();" /> 
</body> 
</html>

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

上一篇：jQuery實現表單提交時判斷的方法

下一篇：javascript里使用php代碼實例