原生DOM系列-Window对象

本系列文章中所指的DOM，都是纯纯的HTML DOM，不包括XML DOM等
Window对象包含window、document等属性
也就是说window属性和document属性同属于Window对象
该文档中过滤掉了部分特别常用的属性或方法，如alert/console等
同时也过滤掉了部分特别不常用的属性或方法
内容尚不完整，请下周继续收看！！

window属性

• window属性指向当前Window对象
• 全局环境下window属性同其它属性和this的关系

1 2 3 4 5 6 7 8 9 10

window === this // this和window同指向Window对象 window.this // undefined。this并非Window对象的属性 window === parent // 顶层window中，parent属性指向当前Window对象 window.parent === window // parent是Window对象的属性 window === top // 顶层window中，top属性都指向当前Window对象 window.top === top // top是Window对象的属性 window === self // self和window一样指向当前Window对象 window.self === self // self是Window对象的属性 window === document.defaultView window === frames // 是不是很奇怪。其实iframes会被解析挂载到window对象上，window对象是一个类数组对象

self

• 指向当前window对象

1	self === window

parent

• parent属性指向包含当前Window对象的Window对象

1 2	// 假设当前html文档中包含一个name等于frame1的iframe frames['frame1'].parent === window

top

• top属性指向最顶层Window对象

1 2 3

// 假设当前html文档中包含一个name等于frame1的iframe // frame1文档中有包含frmae2文档 frames.frame1.top === frames.frame1.frames.frame2.top

frames

• 当前文档中所有包含的iframe的集合
• frames对象指向当前Window对象，真正的iframe集合以数组和Window对象属性的形式挂载到Window对象上。

1 2 3 4

// 假设当前html文档中包含一个name等于frame1的iframe frames[0] === frames['frame1'] frames[0] === window[0] frames[0] === window['frame1']

closed

• 返回窗口是否已被关闭

1 2 3 4 5 6

// 打开一个窗口 var demo = window.open('', '', 'width=200,height=100') demo.closed // false   // 关闭打开的窗口 demo.closed // true

document

• 对Document对象的只读引用

1 2	window.document = 1 // 不会报错，但不生效 document // Document对象

• 详见原生DOM系列-Document对象

history

• 对History对象的只读引用

1 2	window.history = 1 // 不会报错，但不生效 history // History对象

• 详见原生DOM系列-History对象

innerHeight & innerWidth

• 只读属性
• 返回窗口的文档显示区高度和宽度，不包括菜单栏、工具栏和滚动条等高度
• IE不支持该属性，以clientHeight & clientWidth代替

length

• 设置或返回窗口中得iframe数量

1 2 3 4

// 假设当前html文档中包含一个name等于frame1的iframe window.length // 1 length = 10 window.lenght // 10

location

• 对Location对象的引用
• 详见原生DOM系列-Location对象

name

• 设置或返回窗口的名称

1 2	window.name == '123' name // '123'

navigatory

• 对Navigator对象的引用
• 详见原生DOM系列-Navigator对象

opener

• 返回对创建该窗口的Window对象的引用
• 可以通过该属性调用创建者Window对象的属性和方法，从而控制创建者窗口的内容变化
• 如果被打开的页面和当前页面不在同一个域下，被打开的页面中opener为空

1 2 3 4 5 6 7

// 当前窗口(open.html)中执行 let demo = open('opened.html', '', 'width=200,height=100')   // opened.html中执行 opener.document.write('haha')   // open.html中的内容会变成'haha'

outerHeight & outerWidth

• 返回整个窗口的高度和宽度
• IE中不支持，也不存在替代属性
• 移动端这些属性会一直返回0

screen

• 对Screen对象的只读引用
• Screen对象获取打开当前浏览器的屏幕的相关信息

screenLeft & screenTop & screenX & screenY

• 只读属性
• 返回浏览器窗口在屏幕上的x坐标和y坐标
• 移动端无实际意义，因为移动端浏览器窗口始终是全屏幕打开的，这些数据会一直都是0

close()

• 仅能对通过js打开的窗口有用
• 移动端无效

1 2	let demo = open('', '', 'widht=200,height=100') demo.close() // demo窗口打开之后立即被关闭

open()

• 打开一个新的浏览器窗口或查找一个已命名的窗口
• 移动端无效

scrollBy(xnum, ynum)

• 按x/y轴滚动指定的像素数

1 2	scrollBy(0, 100) // 向下滚动100px scrollBy(100, 0) // 向右滚动100px

scrollTo(xpos, ypos)

• 将内容滚动到文档的指定坐标位置

1 2	scrollTo(0, 0) // 滚动到最上面，最左边 scrollTo(0, document.body.scroll) // 滚动到最上面，最左边

…未完待续！！

 

 

#DOM