iFrame 框架子页面获取父级元素窗口以及高度 - 文章教程

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

发布于 2017-11-06 字数 2113 浏览 4122 评论 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:既然能获取,当然也能修改其中的属性或者内容。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0