iframe于iframe页面之间的函数相互调用

  因为iframe页面于包括父页面在内的其他页面通讯有跨域问题,所以只有在服务器环境下或者火狐浏览器下才能测试。

  在iframe页面调用父页面的函数采用parent,例子:在父页面有一个say()函数,在iframe页面可以这样调用parent.say();

  如果在页面内有多个iframe,可以用parent[0],parent[1]...这样定位到某个iframe。

  1、在index.html页面下有iframe1.html 和 iframe2.html。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
<iframe name="iframe1" src="iframe1.html" id="if1" frameborder="0" width="500" height="500"></iframe>
<iframe name="iframe2" src="iframe2.html" id="if2"></iframe>
</body>
</html>

 

  2、iframe1.html里有自定义两个函数say()和callChild();

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe1</title>
<script type="text/javascript">
function say() {
alert("来着iframe1页面");
}
function callChild()
{
parent[1].window.say();
}
</script>
</head>

<body>
<input type=button value="调用iframe2中的函数say()" onclick="callChild()">
</body>
</html>

 

  3、2、iframe2.html里有自定义两个函数say()和callChild();

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe2</title>
<script type="text/javascript">
function say()
{
alert("来自iframe2页面");
}
function callParent() {
parent[0].say();
}

</script>
</head>
<body>

<input type=button value="调用iframe1中的say()函数" onclick="callParent()">
</body>
</html>

 

posted @ 2016-07-06 15:26  飞天狼  阅读(4317)  评论(0编辑  收藏  举报