原生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 // thiswindow同指向Window对象
window.this // undefinedthis并非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'
  • 对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) // 滚动到最上面,最左边

…未完待续!!