js中的BOM操作(一)

JavaScript中的BOM操作

BOM：浏览器对象模型（Browser Object Model，简称 BOM）提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作

一、Window对象

浏览器窗口
特点
1.对于全局变量或全局方法，在取值或调用时可以省略

var a = 10;
console.log(a); //10
console.log(window.a);  //10
console.log(window.a === a);    //true

2.window对象时js中的顶级对象(所有的全局变量 全局函数 包括document 都是window对象的属性)

3.window对象有一个默认属性name，name不管设什么值 类型都是字符串

window.name = undefined;
console.log(typeof name);   //  string
console.log(name);  //undefined

window.name = {};
console.log(typeof name);   //  string
console.log(name);  // [object Object]

window.name 作用： (1)获取/设置窗口的名称 (2)利用window.name实现跨域

4.window.top 属性是只读性质 无法修改

console.log(window.top);
window.top = 123;
console.log(window.top);

window对象的常用属性：

window.self 返回当前窗口的引用

window.parent 返回当前窗体的父窗体对象

window.top 返回当前窗体最顶层的父窗体的引用

window.outerwidth 返回当前窗口的外部宽

window.outerheight 返回当前窗口的外部高

window.innerwidth 返回当前窗口的可显示区域宽

window.innerheight 返回当前窗口的可显示区域高

提示：通过直接在Chrome控制台中输入console.log(window)可以查看到其所有的被当前浏览器支持的属性及值。

window对象的常用方法：

与打开窗口相关的方法：

window.prompt() 弹出一个输入提示框，若用户点击了“取消”则返回null

window.alert() 弹出一个警告框

window.confirm() 弹出一个确认框

window.close() 关闭当前浏览器窗口。 有些浏览器对此方法有限制。

window.open(uri, [name], [features].[replace]) 打开一个浏览器窗口，显示指定的网页。name属性值可以是“_blank”、“_self”、“_parent”、“_top”、任意指定的一个窗口名。featrues 窗口特征
replace 布尔值 true 替换浏览历史中的当前条目 false 在浏览历史中创建新的条目

window.blur( ) 指定当前窗口失去焦点

window.focus( ) 指定当前窗口获得焦点

window.showModalDialog(uri, [dataFromParent]) 打开一个“模态窗口”（打开的子窗口只要不关闭，其父窗口即无法获得焦点；且父子窗口间可以传递数据）

window从浏览器打开到关闭的三个时刻
1.window.onload : 页面所有内容加载完毕才会执行
2.window.onbeforeprint : 在页面即将关闭的一刻
3.window.onunload : 页面正在关闭

二、history对象

history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。由于安全方面的考虑，开发人员无法得到用户浏览器的URL，但借由用户访问过的页面列表，可以在不知道实际URL的情况下实现后退和前进。
length
history.length属性保存着历史记录的URL数量。初始时，该值为1。如果当前窗口先后访问了三个网址，history.length属性等于3
由于IE10+浏览器在初始时返回2，存在兼容性问题，所以该值并不常用

history.length // 初始时，该值为1
history.length // 访问三个网址后，该值为3

history对象提供了一系列方法，允许在浏览历史之间移动，包括go()、back()和forward()
go()
使用go()方法可以在用户的历史记录中任意跳转。这个方法接收一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(类似于后退按钮)，正数表示向前跳转(类似于前进按钮)

//后退一页
history.go(-1)
//前进一页
history.go(1);
//前进两页
history.go(2);
// go()方法无参数时，相当于history.go(0)，可以刷新当前页面
//刷新当前页面
history.go();

back()
back()方法用于模仿浏览器的后退按钮，相当于history.go(-1)
forward()
forward()方法用于模仿浏览器的前进按钮，相当于history.go(1)

//后退一页
history.back()
//前进一页
history.forward()

如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败

[注意]使用历史记录时，页面通常从浏览器缓存之中加载，而不是重新要求服务器发送新的网页

三、location对象

地址栏信息
属性：
hash
获取地址栏上#以及后面的内容

host
获取主机名及端口号，注意这是获取本机的。

hostname
获取主机名，同样是本机的。

pathname
获取你打开的文件的相对路径

port
获取端口号

protocol
获取协议的，一般来说都是http

search
获取你搜索的内容，具体可以是百度一下，地址栏上会有搜索的内容的名字。

location对象的三个方法
1.跳转网页 ： 在浏览器历史记录中产生了一条新的记录
location.assign(“http://www.baidu.com”);
2.替换网页 ：不可回退
location.replace(“http://www.baidu.com”);
3.刷新网页 ： F5刷新功能
location.reload();