`

Window 对象中的parent属性——iframe子窗口访问父窗口

 
阅读更多
Window 对象

Window 对象表示浏览器中打开的窗口。
如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

 

手中的一个项目包含iframe与父窗口的交互,之前的一个同事的调用一个基于jQuery组件的方法是

parent.$.functionName

 之前没太弄明白这么写的原因,待到需要自己来开发别的模块的时候,查了一下资料

 

window.parent→→返回父窗口

 

需要这么写的需求是,因为页面内嵌有一个iframe模块,而现在需要调用一个弹出窗体dialog,如果使用普通的调用方法,则窗体唤出仅仅存在iframe这一个小小的区域,展示的范围受限,不能完成的存在于整个屏幕。所以如果,在iframe的父级窗体,即大window里面唤出dialog的话,dialog的范围就扩大了,实现全屏。

 

按照这个思路,则需要回到父窗口来调用dialog,即window.parent,在函数体内,这个方法仍然是在iframe里面使用,调用父窗体的方法,从DOM结构而言,整个dialog已经超出iframe范围内,



 

对父窗体内容的选择

window.parent.$('#form')

 

在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。



window.self


功能:是对当前窗口自身的引用。它和window属性是等价的。

语法:window.self

注:window、self、window.self是等价的。



window.top

功能:返回顶层窗口,即浏览器窗口。

语法:window.top

注:如果窗口本身就是顶层窗口,top属性返回的是对自身的引用。



window.parent

功能:返回父窗口。

语法:window.parent

注:如果窗口本身是顶层窗口,parent属性返回的是对自身的引用。

在框架网页中,一般父窗口就是顶层窗口,但如果框架中还有框架,父窗口和顶层窗口就不一定相同了。



判断当前窗口是否在一个框架中:

<script type="text/javascript">
var b = window.top!=window.self;
document.write( "当前窗口是否在一个框架中:"+b );
</script>

你应当将框架视为窗口中的不同区域,框架是浏览器窗口中特定的部分。一个浏览器窗口可以根据你的需要分成任意多的框架,一个单个的框架也可以分成其它多个框架,即所谓的嵌套框架。

 

 

文章参考自:

Js中的window.parent ,window.top,window.self 详解

ttp://blog.csdn.net/zdwzzu2006/article/details/6047632

Window 对象

http://www.w3school.com.cn/jsref/dom_obj_window.asp

  • 大小: 10.3 KB
分享到:
评论

相关推荐

    iframe 父窗口和子窗口相互的调用方法集锦

    一、父窗口调用iframe子窗口方法 1、HTML语法:&lt;iframe name=”myFrame” src=”child.html”&gt;&lt;/iframe&gt; 2、父窗口调用子窗口:myFrame.window.functionName(); 3、子窗品调用父窗口:parent....

    iframe父子传值

    window.parent.postMessage('我是来自子页面的数据', '父页面的源URL'); // 父页面 window.addEventListener('message', function(event) { if (event.origin !== '子页面的源URL') return; console.log('接收到...

    浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总

    2. **JavaScript对象和方法**:文章展示了window和parent对象的使用,以及如何通过不同的方法访问父窗口或特定的iframe。window对象用于引用当前窗口,而parent属性用于访问父窗口。 3. **刷新iframe页面**:作者...

    无限菜单之 xml+popup 版(IE5.5+)

    Popup窗口中的内容是不能被选择的; ...... 因为这些特征,Popup窗口制作的菜单比起传统的div(层)实现的菜单有着得天独厚的优势,不仅效果会非常好,而且代码也会是非常少的,只是对于实现起来却有几个需要解决...

    JavaScript 跨域通信方法

    - **`postMessage` API**:另一种解决方案是使用`postMessage` API,它可以实现任意两个窗口对象间的通信,无论它们是否同源。父页面可以通过监听`message`事件来接收子页面发送的消息,同样地,子页面也可以通过...

Global site tag (gtag.js) - Google Analytics