The webtouch from alanzhang001

contentWindow,contentDocument, docuemnt ,window,self,top,parent,opener的关系

前言

最近又开始开发公司的后台管理系统，由于整个页面的架构是通过iframe来进行区域划分，所以经常需要通过父窗口来调用子窗口方法或者子窗口获取父窗口变量等窗口的情况，所以整理一下相关的用法，避免遗忘！

一.top,parent,self,window，opener之间的区别和关系

self: 当前窗口的引用

与winow,window.self等价。

top: 顶层窗口对像

与window.top等价；如果窗口本身就处于顶层，则top与window,window.top对象等价。

parent: 当前窗口的父窗口

与window.parent等价;如果窗口本身就处于顶层，则top与parent,window.parent对象等价。

opener: 属性是一个可读可写的属性，返回创建当前窗口的 Window 对象的引用；

语法：window.opener

说明：

window.opener特指通过window.open 方法打开的新窗口的那个窗口，例如：A窗口通过 wndow.open方法(不能通过其他方式)，打开B窗口，则windowB.opener == windowA;
window.opener 与window.parent 无直接关系，只有当iframe窗口是父窗口通过 window.open(url,frameName) 打开时,window.opener才与window.parent等价！

举个栗子：（我曾长期对此迷惑不解，囧）

A.html


    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <script type="text/javascript" scr="../jquery1.10.2.min.js"></script>
        </head>
        <body>
            <iframe id="contFrame" name="contFrame"></iframe>
        </body>
        <script type="text/javascript">
            window.open("B.html","contFrame")
        </script>
    </html>

B.html


    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        <body>
            <p>我是被打开的页面</p>
        </body>
        <script type="text/javascript">
            var equalAble = window.opener == window.parent;
            console.log(equalAble);// true
        </script>
    </html>

这个情况下，window.opener == window.parent;

二.contentWindow，contentDocument 及iframe的获取方式

定义：

contentWindow：子窗口的 window 对象，所有主要浏览器都支持 contentWindow 属性,但是他并不是标准的一部分；

contentDocument ：子窗口的 document 对象，以 HTML 对象返回框架容纳的文档。可以通过所有标准的 DOM 方法来处理被返回的对象，IE需要IE8+才能支持，

获取iframe：

想要获取一个iframe元素有如2种方式：

1.document.getElementById("iframeId")

2.window.frames["iframeName"]

通过上面2种方式获得的iframe对象来获取代表当前iframe窗口的window和document对象也对应2种方式。

获取window，document对象：

如果是通过dom直接获取的iframe，则获取docuemen和window的方式是：

doc= document.getElementById('iframeName' ).contentDocument; //文档对象

wind= document.getElementById('iframeName' ).contentWindow; //window对象
如果是通过window.iframes["name]的方式来获取iframe,则获取docuemen和window的方式是：

doc = document.frames['iframeId'].document;

window = window.frames["iframeId"].window;

区别：在梳理iframe知识的时候，我认为contentWindow 与window可能会有区别，梳理完之后才意识到这个疑惑本身就有问题，contentWindow就是子窗口的window对象，在子窗口中，其window对象通过关键字window表示，指向其窗口引用，在父级窗口中，可以通过contentWindow属性获得子窗口的window对象。只是表示方式不一样罢了！看来梳理一下知识还是挺有用的！

参考文档：

所有主要浏览器都支持 contentWindow 属性

别来无恙

小张，别来无恙，毕业后这么多年，室友当中始终最牵挂的还是那个艾伦张

alanzhang001 / webtouch Goto Github PK

webtouch's People

Contributors

Stargazers

Watchers

Forkers

webtouch's Issues

contentWindow,contentDocument, docuemnt ,window,self,top,parent,opener的关系

前言

一.top,parent,self,window，opener之间的区别和关系

二.contentWindow，contentDocument 及iframe的获取方式

参考文档：

别来无恙

test

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent