iFrame 框架子页面获取父级元素窗口以及高度
iFrame 虽然在我们现在的网页中用的不多，不过依然无法捍卫其使用便捷的地位，特别是编写后台的时候，实现局部的网页内容刷新，提高网页内容的复用性。
iFrame 里的 JavaScript 要操作父级窗口的 DOM 元素，必须搞懂几个对象：
- parent 是父窗口（如果窗口是顶级窗口，那么 parent == self == top）
- top 是最顶级父窗口（有的窗口中套了好几层 frameset 或者 iframe）
- self 是当前窗口（等价 window）
父级页面 index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>父窗口</title>
</head>
<body style="width:2000px;">
<div id="demo" style="height:40px;"></div>
<iframe src="children.html"></iframe>
</body>
</html>子窗口 children.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子窗口</title>
</head>
<body>
<script src="jquery.min.js"></script>
<script>
$(function(){
var p_window = window.top;
alert($(p_window).height());
var p_demo = window.top.document.getElementById('demo');
alert($(p_demo).height());
})
</script>
</body>
</html>这里使用 jQuery 库，方便开发。
说明：
- 获取父窗口节点信息只能用 JavaScript 原生态的方法和属性
- 获取父级窗口的高度：首先获取父窗口的 DOM 节点，然后通过 jQuery 库的
$方法转变为 jQuery 对象，通过 jQuery 的height()方法输出父窗口的高度； - 获取父级元素的高度：首先获取父窗口中元素的 DOM 节点，然后通过 jQuery 库的
$方法转变为 jQuery 对象，通过 jQuery 的height()方法输出元素的高度；
PS：既然能获取，当然也能修改其中的属性或者内容。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论