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

一、    window对象

.    什么是window对象?

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

补充:什么是父窗口和子窗口?

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

.    Window对象集合

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

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

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

)    如何获取子iframe框架中的window对象呢(也就是获取当前window对象的子窗体iframe)?

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

a.通过window.frames[索引]:比如如果有两个当前窗体有两个iframe一个name=test1,一个name=test2,那么我想要获取name为test2的iframe我就可以这样使用:window.frames[],获取的就是当前窗体中包含的名词为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,此时该怎么办呢?通过名称获取不到,可以通过索引获取啊。

)    parent属性如何使用

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

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

)    top属性如何使用

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

.    如何调用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(“标签名”)返回数组对象

js中Frame框架的属性获取(1)的更多相关文章

  1. node.js中的框架

    node.js中的框架 载自: http://nodeframework.com/ MVC frameworks Sinatra-like These frameworks offer rich co ...

  2. JS中的可枚举属性与不可枚举属性以及扩展

    在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for…in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...

  3. JS中访问对象的属性

    方式一: 对象名.属性名;   方式二: 对象名["属性名"];   ★注意:方式二中,属性名以字符串的形式出现在方括号中,这意味着通过方式二访问属性的话,可以实现“动态访问对象的 ...

  4. UIView 中 frame, bounds, center 属性的关系

    最近一直在学 iOS 开发,所以专门创建了这样一个类别,将自己学习中的一些问题整理,记录下来.由于自己是初学者,所以所写的文章非常基础,写这个类别一是为了给自己留下存 档,二是为了给和我有同样问题的初 ...

  5. js中的可枚举属性与不可枚举属性

    在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for…in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...

  6. js中createlement和creatTextnode属性

    js中可以使用creatElement方法创造一个新的元素,使用creatTextnode创造一个新的text文本元素. 之后使用appendchild插入到已存在的元素中. ** window.on ...

  7. 浅谈js中的数据类型,使用typeof获取js数据类型

    JS中的数据类型 1):Undefined——值未定义 注:Undefined类型只有一个值,即特色的undefined.在使用var声明变量但未对其加以初始化时,这个变量的值就是undefined ...

  8. JS中firstChild,lastChild,nodeValue属性

    childNodes 在JavaScript中,使用childNodes属性可以返回一个数组,这个数组包含给定元素节点的全体子节点. firstChild firstChild 这句代码等价于 目标元 ...

  9. JS操作frame框架

    1 框架编程概述 一个Html 页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一 个独立的Html 页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访 ...

随机推荐

  1. iOS - UITableViewController

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UITableView : UIScrollView <NSCoding> @available(iOS ...

  2. install python module

    [install python module] 参考:http://docs.python.org/2.7/install/index.html

  3. red5研究(一):下载,工程建立、oflaDemo安装、demo测试

    一.red5下载.添加工程到myeclipse 1,从官网上下载red51.01版本(我下载的是red51.0的版本),下载链接http://www.red5.org/downloads/red5/1 ...

  4. BZOJ3175: [Tjoi2013]攻击装置

    题解: 最大点独立集...好像水过头了... 不过发现我二分图好像忘完了!!! 代码: #include<cstdio> #include<cstdlib> #include& ...

  5. 为什么喜欢Kindle

    为什么喜欢Kindle 有朋友问为什么那么多人喜欢用Kindle,作为刚入手一台Kindle PaperWhite 2 的人, 我想说:这个东西,应该算今年我买的最值得的设备了.它的好处太多了:1:轻 ...

  6. (1)ActivityThread分析

    1. 入口. 曾经一直都说Activity的人口是onCreate方法.事实上android上一个应用的入口,应该是ActivityThread.和普通的java类一样,入口是一个main方法. pu ...

  7. poj 1466 Girls and Boys (最大独立集)

    链接:poj 1466 题意:有n个学生,每一个学生都和一些人有关系,如今要你找出最大的人数.使得这些人之间没关系 思路:求最大独立集,最大独立集=点数-最大匹配数 分析:建图时应该是一边是男生的点, ...

  8. git使用3

    如何使用/学习第三方框架? 优秀的第三方框架都在 github.com 1> 搜索 2> git clone 获得完整版本 $ git clone https://github.com/A ...

  9. 如何使用百度bae部署web项目

    百度bae提供了支持各种开发环境的的应用引擎,包括node.js.php.java等,而且还免费提供了一定容量的mysql.mongodb.redis等数据库,所以,可以把它当作一个云服务器来使用.而 ...

  10. 详解html中的元老级元素:“table”

    table标签历史悠久,在互联网出现的早期,web网页的排版主要是靠table表格,对web网页做出了不可磨灭的贡献,直到后来层叠样式表:CSS的发展完善,再配合空元素DIV,才有了今天绚丽多彩的网页 ...