JavaScript--10 BOM（window、location、history、navigator）

BOM 的核心对象是 window，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global （全局）对象。

一、window 对象

BOM 的核心对象是window，它表示浏览器的一个实例。

1.1 全局作用域

  由于 window 对象同时扮演着 ECMAScript 中 Global 对象的角色，因此所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。

抛开全局变量会成为window 对象的属性不谈，定义全局变量与在window 对象上直接定义属性还是有一点差别：全局变量不能通过delete操作符删除，而直接在window 对象上的定义的属性可以。

还要记住一件事：尝试访问未声明的变量会抛出错误，但是通过查询window 对象，可以知道某个可能未声明的变量是否存在。

1.2 setTimeout() 和 setInterval()

1.2.1 setTimeout() 方法

  setTimeout()方法接受两个参数：要执行的代码和等待毫秒数。
  其中，第一个参数可以是一个包含 JavaScript 代码的字符串串（就和在eval()函数中使用的字符串一样），也可以是一个函数。由于传递字符串可能导致性能损失，因此不建议以字符串作为第一个参数。

//不建议传递字符串！
setTimeout("alert('Hello world!') ", 1000); 

//推荐的调用方式
setTimeout(function() { 
	alert("Hello world!"); 
}, 1000); 

  调用 setTimeout()之后，该方法会返回一个数值 ID，表示超时调用。这个超时调用 ID 是计划执行代码的唯一标识符，可以通过它来取消尚未执行的超时调用。

//设置超时调用
var timeoutId = setTimeout(function() { 
 alert("Hello world!"); 
}, 1000); 
//注意：把它取消
clearTimeout(timeoutId); 

超时调用的代码都是在全局作用域中执行的，因此函数中this的值在非严格模式下指向window 对象，在严格模式下是undefined。

1.2.2 setInterval() 方法

  间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被关闭。
  设置间歇调用的方法是 setInterval()，它接受的参数与 setTimeout()相同：要执行的代码（字符串或函数）和每次执行之前需要等待的毫秒数。

//不建议传递字符串！
setInterval ("console.log('Hello world!') ", 1000); 

//推荐的调用方式
setInterval (function() { 
	console.log("Hello world!"); 
}, 1000); 

  调用 setInterval()方法同样也会返回一个间歇调用 ID，该 ID 可用于在将来某个时刻取消间歇调用。要取消尚未执行的间歇调用，可以使用 clearInterval()方法并传入相应的间歇调用 ID。
  取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面卸载。

1.2.3 超时调用模拟间歇调用

var num = 0; 
var max = 10; 
var intervalId = null; 
function incrementNumber() { 
	num++; 
	//如果执行次数达到了 max 设定的值，则取消后续尚未执行的调用
	if (num == max) { 
		clearInterval(intervalId); 
		alert("Done"); 
	} 
} 
intervalId = setInterval(incrementNumber, 500); 

  上面的间歇调用可以使用下面的超时调用替换掉，一般来说，不推荐使用间歇调用。

var num = 0; 
var max = 10; 
function incrementNumber() { 
	num++; 
	//如果执行次数未达到 max 设定的值，则设置另一次超时调用
	if (num < max) { 
		setTimeout(incrementNumber, 500); 
	} else { 
		alert("Done"); 
	} 
} 
setTimeout(incrementNumber, 500); 

1.3 alert()、confirm() 和 prompt() 方法

  alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示消息。系统对话框与在浏览器中显示的网页没有关系，也不包含 HTML。它们的外观由操作系统及（或）浏览器设置决定，而不是由 CSS 决定。此外，通过这几个方法打开的对话框都是同步和模态的。也就是说，显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行。

  alert() ： 输出一个确定按钮的对话框，点击确定后对话框关闭。
  confirm() ： 输出一个确定按钮和一个取消按钮。点击确定按钮返回true，点击取消按钮返回 false。
  prompt() ： 输出一个带有输入框的对话框。可以输入第二个参数，表示输入框内默认值。点击确定按钮返回输入内容（未输入内容返回 “”），点击取消按钮返回 null。

举例：

// confirm
if (confirm("Are you sure?")) { 
	alert("I'm so glad you're sure! "); 
} else { 
	alert("I'm sorry to hear you're not sure. "); 
} 

// prompt
var result = prompt("What is your name? ", "");
if (result !== null) {
alert("Welcome, " + result);
}

二、location 对象

  location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是document 对象的属性；换句话说，window.location 和 document.location 引用的是同一个对象。

2.1 location 对象将 URL 解析为独立的片段

  location 对象的用处不只表现在它保存着当前文档的信息，还表现在它将 URL 解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。下图列出了 location 对象的所有属性（注：省略了每个属性前面的 location 前缀）。

属 性 名	例 子	说 明
hash	“#/home”	返回URL中的hash（#号后跟零或多个字符），如果URL中不包含散列，则返回空字符串
host	“wxtest2.ahrcu.com:8082”	返回服务器名称和端口号（如果有）
hostname	“wxtest2.ahrcu.com”	返回不带端口号的服务器名称（域名/IP）
href	“https://wxtest2.ahrcu.com:8082/app/index.html#/home”	返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值
pathname	“/app/index.html”	返回URL中的目录和（或）文件名
port	“8082”	返回URL中指定的端口号。如果URL中不包含端口号，则这个属性返回空字符串
protocol	“https:”	返回页面使用的协议。通常是http:或https:
search	“”	返回URL的查询字符串。这个字符串以问号开头

获取URL中的参数

var theRequest = {},
	urlData = window.location.search 
			? decodeURIComponent(window.location.search).substring(1) 
			: 'from=wechat';	// 给一个默认值或者 "" 
		
// 重组 URL 参数
var arr = urlData.split('&');
for (var i = 0; i < arr.length; i++) {
	var item = arr[i].split("=");
   	theRequest[item[0]] = item[1];
}

2.2 改变当前页面 URL 地址

使用 assign()方法并为其传递一个URL就可以立即打开新URL 并在浏览器的历史记录中生成一条记录。如果是将location.href或window.location设置为一个URL 值，也会以该值调用assign()方法。

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

上面三行代码作用相同，当前页面跳转到新页面。在这些改变浏览器位置的方法中，最常用的是设置location.href属性。

  另外，修改location对象的其他属性也可以改变当前加载的页面。下面的例子展示了通过将hash、search、hostname、pathname 和 port 属性设置为新值来改变 URL。

//假设初始 URL 为 http://www.wrox.com/WileyCDA/ 

//将 URL 修改为"http://www.wrox.com/WileyCDA/#section1" 
location.hash = "#section1"; 

//将 URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript" 
location.search = "?q=javascript"; 

//将 URL 修改为"http://www.yahoo.com/WileyCDA/" 
location.hostname = "www.yahoo.com"; 

//将 URL 修改为"http://www.yahoo.com/mydir/" 
location.pathname = "mydir"; 

//将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/" 
location.port = 8080; 

  当通过上述任何一种方式修改 URL 之后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击“后退”按钮都会导航到前一个页面。要禁用这种行为，可以使用replace()方法。

  replace()方法只接受一个参数，即要导航到的 URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。在调用 replace()方法之后，用户不能回到前一个页面，来看下面的例子：

location.replace("http://www.wrox.com/"); 

与位置有关的最后一个方法是reload()，作用是重新加载当前显示的页面。如果调用reload()时不传递任何参数，页面就会以最有效的方式重新加载。也就是说，如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载，则需要像下面这样为该方法传递参数true。

location.reload(); //重新加载（有可能从缓存中加载）
location.reload(true); //重新加载（从服务器重新加载）

位于reload()调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素。

三、history 对象

3.1 go() 方法

//后退一页
history.go(-1); 

//前进一页
history.go(1); 

// 跳转到最近的 wrox.com 页面
// 可能后退，也可能前进，具体要看哪个位置最近。
// 如果历史记录中不包含该字符串，那么这个方法什么也不做
history.go("wrox.com"); 

3.2 back() 和 forward() 方法

  另外，还可以使用两个简写方法 back()和 forward()来代替 go()。顾名思义，这两个方法可以模仿浏览器的“后退”和“前进”按钮。

//后退一页
history.back(); 

//前进一页
history.forward(); 

  history 对象还有一个 length 属性，保存着历史记录的数量。这个数量包括所有历史记录，即所有向后和向前的记录。
  对于加载到窗口、标签页或框架中的第一个页面而言，history.length 等于 0。通过像下面这样测试该属性的值，可以确定用户是否一开始就打开了你的页面。

if (history.length == 0){ 
	//这应该是用户打开窗口后的第一个页面
} 

四、navigator 对象

五、screen 对象