JS回归基础之BOM 

JS 浏览器对象模型BOM（Browser Object Model ）

1. window对象

客户端 JavaScript 顶层对象。每当 <body> 或 <frameset> 标签出现时，window 对象就会被自动创建

1.1 全局作用域

var age = 29; 
window.color = "red"; 
//在 IE < 9 时抛出错误，在其他所有浏览器中都返回 false 
delete window.age; 
//在 IE < 9 时抛出错误，在其他所有浏览器中都返回 true 
delete window.color; //returns true
alert(window.age); //29 
alert(window.color); //undefined

使用 var 语句添加的 window 属性有一个名为 [[Configurable]] 的特性，这个特性的值被设置为false，因此这样定义的属性不可以通过delete操作符删除。

1.2 系统对话框

alert()
confirm()
prompt()

1.3 打开和关闭窗口

window.open (URL, name, features, replace)
window.close()
window.closed() 关闭则返回 true，否则返回 false。

1.4 使用定时器

setInterval()
setTimeout()
clearInterval()
clearTimeout()

1.5 控制窗口大小和位置

moveTo() / moveBy()
resizeTo() / resizeBy()
scrollTo() / scrollBy()

2. location对象

当前网页文档的 URL 信息。
如：http://www.123.cn:80/news/index.asp?id=123&name=location#top

href: 当前显示文档的完整 URL
protocol: URL 的协议，包括后缀的冒号。例如：“http:”
host: URL 中的主机名和端口。例如：“www.123.cn:80”
hostname: URL 中的主机名。例如：“www.123.cn”
port: URL 的端口
pathname: URL的路径。例如：“news/index.asp”
search: URL 的查询部分，包括前导问号。例如：“?id=123&name=location”
hash: URL 中锚部分，包括前导符（#）。例如：“#top”,指定在文档中锚记的名称

使用 location 对象获取 URL 中指定字符串的参数值。

function getQueryString(key) {
    
    
	var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)", "i");
	var r = window.location.search.substr(1).match(reg);
	if (r !== null) return decodeURI(r[2]); return null;
}

方法：

reload()：可以重新装载当前文档。
replace()：可以装载一个新文档而无须为它创建一个新的历史记录。

位置操作

1. window.location = "http://www.wrox.com"; 
2. location.href = "http://www.wrox.com";
3. location.assign("http://www.wrox.com");

如果是将 location.href或 window.location 设置为一个 URL 值，也会以该值调用 assign()方法。
在这些改变浏览器位置的方法中，最常用的是设置 location.href 属性。

3. navigator对象

包含浏览器信息。
navigator 对象存储了与浏览器相关的基本信息，如名称、版本和系统等。通过 window.navigator 可以引用该对象，并利用它的属性来读取客户端基本信息。

3.1 浏览器检测方法

特征检测法
特征检测法就是根据浏览器是否支持特定的功能来决定相应操作的方式。

if (document.getElementsByName) {
    
      //如果存在，则使用该方法获取a元素
    var a = document.getElementsByName ("a");
} else if (document.getElementsByTagName) {
    
      //如果存在，则使用该方法获取a元素
    var a = document.getElementsByTagName ("a");
}

字符串检测法
客户端浏览器每次发送 HTTP 请求时，都会附带有一个 user-agent（用户代理）字符串，对于 Web 开发人员来说，可以使用用户代理字符串检测浏览器类型。

var s = window.navigator.userAgent;
  //简写方法
var s = navigator.userAgent;
console.log(s);

3.2 检测浏览器类型和版本号

3.3 检测操作系统

4. screen对象

屏幕信息。

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

5. history对象

历史记录

5.1 属性

length: 历史记录栈中一共有多少页

5.2 方法

back()
forward()
go()
pushState() 添加历史记录条目
包含 3 个参数，简单说明如下：

状态对象。状态对象是一个 JavaScript 对象直接量，与调用 pushState() 方法创建的新历史记录条目相关联。无论何时用户导航到新创建的状态，popstate 事件都会被触发，并且事件对象的 state 属性都包含历史记录条目的状态对象的拷贝。
标题。可以传入一个简短的标题，标明将要进入的状态。FireFox 浏览器目前忽略该参数，考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。
可选参数。新的历史记录条目的地址。

pushState() 方法永远不会触发 hashchange 事件。

replaceState() 方法
history.replaceState() 与 history.pushState() 用法相同，都包含 3 个相同的参数。不同之处是：pushState() 是在 history 栈中添加一个新的条目，replaceState() 是替换当前的记录值。

每当激活的历史记录发生变化时，都会触发 popstate 事件,