首页 > 代码库 > iframe子页面js调用父页面js函数/父页面调用Iframe子页面中js方法

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

2024-08-05 07:12:09   214人阅读

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

 1 <span class="tag"><html> 2 <br></span><span class="tag"><head> 3 <br></span><span class="tag"><title></span><span class="tag"></title></span><span class="tag"> 4 <br></head> 5 <br></span><span class="tag"><body></span><span class="tag"> 6 <br>　　<p></span><span class="pln">iframe页面里的js调用父级页面js函数的demo</span><span class="tag"></p> 7 <br></span><span class="tag">　　<iframe</span><span class="atn">frameborder</span><span class="pun">=</span><span class="atv">"0"</span><span class="atn">width</span><span class="pun">=</span><span class="atv">"0"</span><span class="atn">height</span><span class="pun">=</span><span class="atv">"0" </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"test" </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"b.html"</span><span class="tag">> 8 <br>　　</iframe> 9 <br>   <p id="p_nr"></p></span><span class="tag">10 <br></body>11 <br></span><span class="tag"><script</span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></span><span class="pln">12 　　function testParent</span><span class="pun">(){13 <br>          alert(‘Parent‘);14 <br>     }15 <br></span><span class="tag"></script></span><span class="tag">16 <br></html></span>

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

 1 <span class="tag"><span class="tag"><html> 2 <br></span><span class="tag"><head> 3 <br></span><span class="tag"><title></span><span class="tag"></title></span><span class="tag"> 4 <br></head> 5 <br></span><span class="tag"><body></span> 6 <br><script </span><span class="atn">type</span><span class="pun">=</span><span class="atv">‘text/javascript‘</span><span class="tag">></span><span class="pln"> 7     window</span><span class="pun">.</span><span class="pln">parent</span><span class="pun">.</span><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">‘p_nr‘</span><span class="pun">).</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="str">‘内容‘</span><span class="pun">;//控制父级页面的元素</span><span class="pln"> 8     window</span><span class="pun">.</span><span class="pln">parent</span><span class="pun">.testParent</span><span class="pun">();//调用父级页面的Js函数 9 <br></span><span class="tag"></script>10 <br></span>

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

1、test.js内容

function testJs()

{

alert(‘JS‘);

}

2、Children.html内容

<html>

<head>

<title></title>

<script type="text/javascript" src="http://www.mamicode.com/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>

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


联系
我们