iframe子页面js调用父页面js函数/父页面调用Iframe子页面中js方法

时间:2022-12-21 11:37:29

一、iframe页面里的js调用父级页面js函数

1、假设当前页面为a.html, iframe的src页面为b.html,其代码如下:

<html>

<head>
<title></title>
</head>
<body>
  <p>
iframe页面里的js调用父级页面js函数的demo</p>
  <iframeframeborder="0"width="0"height="0" name="test" src="b.html">
  </iframe>
<p id="p_nr"></p>

</body>
<scripttype="text/javascript">   function testParent(){
alert('Parent');
}
</script>
</html>

2、b.html里的页面元素为:

<html> 
<head>
<title></title>
</head>
<body>
<script
type='text/javascript'> window.parent.document.getElementById('p_nr').innerHTML ='内容';//控制父级页面的元素 window.parent.testParent();//调用父级页面的Js函数
</script>

</body>
</html>

二、父页面调用Iframe页面中js方法

1、test.js内容

function testJs()

{

alert('JS');

}

2、Children.html内容

<html>

<head>

<title></title>

<script type="text/javascript" src="test.js"></script>

</head>

<body>

</body>

</html>

3、parent.html内容

<head>

<title></title>

<script type="text/javascript" >

var obj=self.frames[0];

obj.testJs();

</script>

</head>

<body>

</body>

</html>