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. selenium第一课(selenium+java+testNG+maven)

    selenium介绍和环境搭建 一.简单介绍 1.selenium:Selenium是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包 ...

  2. C#中的interface、virtual和abstract

    一.Abstract: abstract方法必须在abstarct类中声明,没有默认实现,子类必须实现. 二.Virtual: virtual方法可以声明在abstract类中,也可以声明在非abst ...

  3. Jquery Highcharts 选项配置 说明文档

    Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,下面为Highcharts常用的最核心的参数选项配置. Chart:图表区选项 Chart图表区选项用于设置图表区相关属性 ...

  4. 通过Map间接比较两个Json格式是否相同

    首先,我们举个例子来对两个Json格式进行比较 第一个Json格式: {"singleway":[],"multiway":{"channelSlav ...

  5. 关于github 0.6.2版本的使用方法

    貌似做为一名前端开发人员,没听过使用过github,node,vue就像落伍一样,本人也是在前端自摸自爬的路上越走越远了,经常在群里听大神们讨论vue,github,node,好生羡慕,没人教,没人带 ...

  6. hadoop分布式安装部署详细视频教程(网盘附配好环境的CentOS虚拟机文件/hadoop配置文件)

    参考资源下载:http://pan.baidu.com/s/1ntwUij3视频安装教程:hadoop安装.flvVirtualBox虚拟机:hadoop.part1-part5.rarhadoop文 ...

  7. css基础--深入理解弹性盒flex布局

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为, ...

  8. ES6 Promise用法讲解

    所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. ES6 规定,Promise对象是一个构造函数,用来生成Promise实例. 下面代码创造了一个 ...

  9. Python数据类型——字符串

    概论 字符串顾名思义就是一串字符,由于Python中没有“字符”这种数据类型,所以单个的字符也依然是字符串类型的.字符串可以包含一切数据,无论是能从键盘上找到的,还是你根本都不认识的.与数一样,字符串 ...

  10. Qt 网格布局

    把十六个button放到网格布局的界面上 #include "mainwindow.h" #include <QApplication> #include<QtW ...