通过<frameset>和<iframe>解析js中window对象parent、self、top的区别

最新推荐文章于 2025-05-15 14:26:55 发布

原创最新推荐文章于 2025-05-15 14:26:55 发布 · 2.2k 阅读

·

1

·

本内容遵循CC 4.0 BY-SA版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入解析了HTML中frameset、frame与iframe的使用方式与区别，详细展示了它们在页面嵌套与层次关系中的应用，并通过实例演示了不同HTML页面间数据获取的方法。

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

[html] view plain copy

<html>
<head></head>
<body>
<iframe src="xxx.html"></iframe>
</body>
</html>
<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”这篇文章。

[html] view plain copy

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页面的文档数据。

标签

#iframe #framset

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。