通过<frameset>和<iframe>看JavaScript中window对象parent、self、top的区别

浏览数：27 / 时间：2015年06月08日

<frameset>、<frame>、<iframe>这3个html元素的区别，可以参考这篇文章"frame,iframe,frameset之间的关系与区别"。标准的使用方式如下：

<!--iframe 是在html页面内嵌入框架框架内可以连接另一个页面-->
<html>
<head></head>
<body>
<iframe src="xxx.html"></iframe>
</body>
</html>

<!--frameset在一个页面中设置一个或多个框架,不能嵌套在body标签里-->
<html>
<head></head>
<frameset>
<frame src=""></frame>
<frame src=""></frame>
</frameset>
</html>

可以看到a.html能够通过<frameset>或者<iframe>包含另一个b.html，而b.html中也可以用同样的方式嵌套c.html。这样就在不同的html之间形成了明显的层次(父子)关系。我们知道每一个html都对应1个js的window对象，既然html有层次关系，window对象也同样有层次关系，而这层次关系就是通过top和parent、self这3个属性来表现的。

1.在任何html页面中(window.self == window)，self和window都是获取当前窗口自身的window对象。

2.top用来获取最顶层的窗口对象，而parent只是获取当前窗口的父窗口。如果当前窗口是最顶层的窗口，那么window.parent == window.top == window.self。如果a.html-->b.html-->c,html通过<frameset>或者<iframe>形成了层次关系，那么在c.html中，window.parent获取的是b.html的窗口，window.top获取的是a.html的窗口。

3.通过<a>打开的页面和原来页面之前没有这种父子关系。

现在我们知道了html页面之间的这种层次关系，现在我们看下不同html之间如何获取彼此的数据。参考“在同一个页面中的一个iframe中用js获取另一个iframe的dom”这篇文章。

main.html
<html>
	<script>
	function init()
	{
		var obj1=document.getElementById("myframe");
		alert(obj1.src);
		//alert(obj1.window.document.myform.username.value);//错误
		
		var obj2=document.frames("myframe");
		alert(obj2.window.document.myform.username.value);
		//alert(obj2.src);//错误
	}
	</script>
	<body onload="init();">
		<iframe id="myframe" name="myframe" src="child.html" frameborder="3" style="width:300;height:200;">
		</iframe>
	</body>
</html>

child.html
<html>
	<body>
		<form name="myform">
			用户名：<input type="text" name="username" value="test" />
		</form>
	</body>
</html>

可以看到关键就是通过:window.document.getElementById()和window.document.frames获取<iframe>标签的属性，或者<iframe>标签加载的html页面的文档数据。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

通过<frameset>和<iframe>看JavaScript中window对象parent、self、top的区别