码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-11-30 14:06:46      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   sp   java   on   div   

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="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方法

标签:style   blog   io   ar   color   sp   java   on   div   

原文地址:http://www.cnblogs.com/gygtech/p/4132990.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!