window frame contentWindow

最新推荐文章于 2021-12-01 14:03:58 发布

原创最新推荐文章于 2021-12-01 14:03:58 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #ViewUI

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文通过一个具体的HTML示例介绍了如何实现父页面与子页面（iframe）之间的交互，包括访问子页面元素、调用子页面方法及修改子页面内容。

父页面

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
        <title>Untitled Document</title>
		<script type="text/javascript">
			function f2method(){
				alert("f2method");
			}
			function test(){
				//父页面访问子页面 (根据iframe的name属性)
				alert(window.frames["f3"].document.getElementsByTagName("h1")[0].firstChild.data);
				//父页面访问子页面 (根据iframe的id值)
				alert(document.getElementById("f3").contentWindow.document.getElementsByTagName("h1")[0].firstChild.data);
				
				//修改子页面的值
				document.getElementById("f3").contentWindow.document.getElementsByTagName("h1")[0].innerHTML="我想变成她一天的一部分";
			}
			
		</script>
    </head>
    <body onload="test()">
        我是frame_2
        <iframe id="f3" name="f3" src="frame3.html"></iframe>
    </body>
</html>

子页面:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
        <title>Untitled Document</title>
        <script language="JavaScript">
            function parentFrame() {
				window.parent.f2method();//调用父页面中的方法
            }
            window.onload = parentFrame;
        </script>
    </head>
    <body>
	  <h1>妹妹的一天</h1> 
      <p>早上吃早点，中午约会吃饭，下午K歌，晚上和哥哥瞎折腾</p>
    </body>
</html>