码迷,mamicode.com
首页 > 其他好文 > 详细

转:iframe加载的子页面里面获取父级元素窗口以及元素的高度

时间:2014-11-28 06:11:51      阅读:975      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   使用   sp   on   

iframe里的js要操作父级窗口的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="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>

说明:

  1. 这里使用jquery库,方便开发。
  2. 获取父窗口节点信息只能用js原生态的方法和属性
  3. 获取父级窗口的高度:首先获取父窗口的dom节点,然后通过jquery库的$方法转变为Jquery对象,通过jquery的html()方法输出父窗口的高度;
  4. 获取父级元素的高度:首先获取父窗口中ID=“demo”元素的dom节点,然后通过jquery库的$方法转变为Jquery对象,通过jquery的html()方法输出ID=“demo”元素的高度;
  5. PS:既然能获取,当然也能修改其中的属性或者内容……

文章转载自:问说 »iframe加载的子页面里面获取父级元素窗口以及元素的高度

转:iframe加载的子页面里面获取父级元素窗口以及元素的高度

标签:style   blog   http   io   ar   color   使用   sp   on   

原文地址:http://www.cnblogs.com/like2php/p/4127567.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!