iframe访问子页面方法

时间:2021-02-01 17:49:30

在Iframe中调用子页面的Js函数

调用IFRAME子页面的JS函数

说明:假设有2个页面,index.html和inner.html。其中index.html中有一个iframe,这个iframe的src指向inner.html。 
我们现在要做的就是: 
1.在index.html中调用inner.html上的一个js方法 
2.在inner.html中调用index.html上的一个js方法

实现代码如下:

index.html 

<html> 
<head> 
<script type="text/javascript"> 
function ff(){ 
alert(">>this is index's js function  index.html"); 

</script> 
</head> 
<body> 
<div style="background: lightblue;"> 
This is index page. 
<input type="button" value="run index's function" onclick="ff();" /> 
<input type="button" value="run inner page's function" onclick='window.frames["childPage"].sonff();' /> 
</div> 
<iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe> 
</body> 
</html>

inner.html 

<html> 
<head> 
<script type="text/javascript"> 
function sonff(){ 
alert(">>this is inner page's js function"); 

</script> 
</head> 
<body> 
<div style="background: lightgreen;"> 
This is inner page. 
<input type="button" value="run index's function" onclick='parent.window.ff();' /> 
<input type="button" value="run inner page's function" onclick="sonff();" /> 
</div> 
</body> 
</html>