通过<frameset>和<iframe>看JavaScript中window对象parent、self、top的区别
<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页面的文档数据。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
