iFrame 框架子页面获取父级元素窗口以及高度

发布于 2017-11-06 23:22:04 字数 1788 浏览 4758 评论 0

iFrame 虽然在我们现在的网页中用的不多,不过依然无法捍卫其使用便捷的地位,特别是编写后台的时候,实现局部的网页内容刷新,提高网页内容的复用性。

iFrame 框架子页面获取父级元素窗口以及高度

iFrame 里的 JavaScript 要操作父级窗口的 DOM 元素,必须搞懂几个对象:

  1. parent 是父窗口(如果窗口是顶级窗口,那么 parent == self == top)
  2. top 是最顶级父窗口(有的窗口中套了好几层 frameset 或者 iframe)
  3. 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 库,方便开发。

说明:

  1. 获取父窗口节点信息只能用 JavaScript 原生态的方法和属性
  2. 获取父级窗口的高度:首先获取父窗口的 DOM 节点,然后通过 jQuery 库的 $ 方法转变为 jQuery 对象,通过 jQuery 的 height() 方法输出父窗口的高度;
  3. 获取父级元素的高度:首先获取父窗口中元素的 DOM 节点,然后通过 jQuery 库的 $ 方法转变为 jQuery 对象,通过 jQuery 的 height() 方法输出元素的高度;

PS:既然能获取,当然也能修改其中的属性或者内容。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。