js中window和document对象及如何操作iframe

js中window和document对象及如何操作iframe

一、    window对象

1.    什么是window对象？

Window对象表示浏览器打开的窗口。如果文档包含iframe或者是frame标签，浏览器会为HTML文档创建一个window对象。所有浏览器都支持该对象。

补充：什么是父窗口和子窗口？

打开一个html页面就是一个窗口。如果该html中包含iframe或者是frame标签，则iframe或者frame就是子窗口，包含iframe或者是frame标签的窗口就是父窗口。个人理解，一个窗口就是一个window对象。

2.    Window对象集合

顾名思义，就是返回多个window对象。每个window对象，都是当前window的子窗口。

frames[]:返回窗口中所有命名的框架。该集合是window对象的数组，每个window对象在窗口中含有一个框架或者iframe。属性frames.length存放数组frames[]中含有的iframe的个数。注意：frames[]数组中引用的框架可能还包含框架，它们自己也具有frames[]数组。

3.    Window对象的parent和top属性和iframe的使用

1)    如何获取子iframe框架中的window对象呢（也就是获取当前window对象的子窗体iframe）？

获取指定的iframe的window对象有三种方式：

a.通过window.frames[索引]：比如如果有两个当前窗体有两个iframe一个name=test1,一个name=test2,那么我想要获取name为test2的iframe我就可以这样使用：window.frames[1],获取的就是当前窗体中包含的名词为test2的子窗体

b.通过window.frames[“iframe名称”]：通过iframe的名词获取首先iframe得有name属性，这样才可以获取到，比如当前窗体包含了一个name=main的iframe，则访问这个iframe直接使用window.frames[“main”]就可以了。

c.第三种方式其实就是通过document对象获取iframe，接着再获取iframe中的window对象，如：window.document.getElementById(“iframeid”).contentWindow；

总结：这三种方式其实都是获取子窗体iframe的window对象，可以直接操作iframe的window对象属性，可以直接操作该iframe中的函数。关键是获取到每个iframe中的window，这样才能获取到其的函数和document对象。

注意：也许会遇到奇葩的情况，比如通过window.frames[“iframe的名词”]. frames[“iframe的名词”]. frames[“iframe的名称”]获取指定名词的iframe，但是获取不到，却也存在该iframe，此时该怎么办呢？通过名称获取不到，可以通过索引获取啊。

2)    parent属性如何使用

刚才说了一下如何访问当前window对象子窗体iframe，那么，如何访问当前window窗体的父窗体呢？就是通过window对象的parent属性。

parent.window获取的就是父窗体的window对象。比如如果要调用父窗体的main函数，就可以使用parent.window.main();

3)    top属性如何使用

如何获取一个iframe最顶层的window对象呢？可以使用top.window，获取的就是iframe最顶层的窗口。调用最顶层的方法一样调用，top.window.method

4.    如何调用iframe中的函数，如果操作iframe中的标签元素？

通过3的分析可以获取iframe的window对象，那么操作iframe中的函数和标签就变得简单了，因为操作iframe中的函数其实就是调用iframe中window中的函数，直接用iframe的window对象调用函数就可以了；如：当前window中包含一个iframe，iframe框架中有一个main函数，那么如何通过父窗体调用子窗体的函数呢？有三种方式：

window.frames[索引].main();

window.frames[“iframe名称”].main();

window.document.getElementById(“iframeId”).contentWindow.main();

现在iframe框架中的方法可以通过window对象直接调用，但是如何操作iframe中的标签元素呢？直接用iframe的window对象的document属性对象就可以操作了。获取到document对象，想怎么操作标签元素就怎么操作标签元素。

window.frames[索引].document;

window.frames[“iframe名称”].document;

window.document.getElementById(“iframeId”).contentWindow.document;

window.document.getElementById(“iframeId”).contentDocument;

通过这四种方式获取子窗体的document，document对象获取之后就可以操作iframe框架中的元素了。一般通过document的方法操作元素。如果想要调用父窗体的函数或者是操作父窗体的标签元素，直接使用：parent.window.document获取父窗体的document对象，使用parent.window.函数名，直接调用父窗体的函数。如果iframe有多层嵌套，那么一层一层去取，方法都相似。

二、    document对象

简单的说document对象就是window对象的属性对象。其实就是一个html文档结构。

那么document有啥用呢？document对象可以操作html文档中的任意一个节点，可以添加修改删除查找一个节点，可以获取某个标签的值，某个标签的属性节点的值。

常用方法：

document.getElementById（“标签元素id属性”） 返回单个元素

document.getElementsByName(“标签元素的name属性”)返回数组对象

document.getElemetsByTagName(“标签名”)返回数组对象

document的其他用途参照：

http://www.w3school.com.cn/htmldom/index.asp