iframe里的js要操作父级窗口的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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/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库，方便开发。
- 获取父窗口节点信息只能用js原生态的方法和属性
- 获取父级窗口的高度：首先获取父窗口的dom节点，然后通过jquery库的$方法转变为Jquery对象，通过jquery的html()方法输出父窗口的高度；
- 获取父级元素的高度：首先获取父窗口中ID=“demo”元素的dom节点，然后通过jquery库的$方法转变为Jquery对象，通过jquery的html()方法输出ID=“demo”元素的高度；
- PS：既然能获取，当然也能修改其中的属性或者内容……
文章转载自：问说 »iframe加载的子页面里面获取父级元素窗口以及元素的高度。
时间： 2024-12-24 09:39:42