您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

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

时间：12-14来源：作者：点击数：

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：既然能获取，当然也能修改其中的属性或者内容。

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:在网页中使用 CSS3 浏览器私有属性前缀下一篇:CSS 的高级条件用法介绍

考了这些证书的可享个	怎样用 PS 把电子文档
记录在本地电脑部署自	围棋入门教程十天即