location是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

location是一个特别的对象，它既是window对象的一个属性，又是document对象的一个属性；换句话说，window.location和document.location引用的是同一个对象。location对象的用处不只表现在它保存着当前文档的信息，还表现在它将URL解析为独立的片段，让开发人员可以通过 不同的属性访问这些片段。

location对象的属性

1. 查询字符串参数

虽然上面的属性可以访问到location对象的大多数信息，但其中访问URL包含的查询字符串的属性并不方便。尽管location.search返回从问号到URL末尾的所有内容，但却没办法逐个访问其中的每个查询字符串参数。为此，可以创建下面这样一个函数，用以解析查询字符串，然后返回包含所有参数的一个对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

function getQueryStringArgs(){
	//取得查询字符串并去掉开头的问号
	var qs = (location.search.length > 0 ? location.search.substring(1) : ''),
	//保存数据的对象
	args = {};

	//取得每一项
	items = qs.length ? qs.split('&') : [];
	item = null,
	name = null,
	value = null,

	//在for循环中使用
	i = 0,
	len = items.length;

	//逐个将每一项添加到args对象中
	for(i = 0; i < len; i++) {
		item = items[i].split('=');
		name = decodeURIComponent(item[0]);
		value = decodeURIComponent(item[1]);

		if(name.length) {
			args[name] = value;
		}
	}

	return args;
}

//假设查询字符串是?q=javascript&num=10
var args = getQueryStringArgs();

console.info(args['q']); //'javascript'
console.info(args['num']); //'10'

每个查询字符串都成了返回对象的属性。这样就极大方便了对每个参数的访问。

2. 位置操作

使用location对象可以通过很多方式来改变浏览器的位置。首先，也是最常用的方法，就是使用assign()方法并为其传递一个URL，如下所示：

1
2

//##skipEval
location.assign('http://halomaple.com/8.2-LocationObject')

这样，就可以立即打开URL并在浏览器的历史记录中生成一条记录。如果是将location.href或者window.location设置为一个URL，也会以该值调用assign()方法。下列代码效果一样：

1
2
3

//##skipEval
window.location = 'http://halomaple.com/8.2-LocationObject';
location.href = 'http://halomaple.com/8.2-LocationObject';

这些方法中最常用的是设置location.href属性的值。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//##skipEval
//假设初始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/mydir/
location.port = 8080;

每次修改location属性（hash除外），页面都会以新URL重新加载。

在IE8、Firefox1、Safari2+、Opera9+和Chrome中，修改hash的值会在在浏览器的历史记录中生成一条新记录。在IE早期版本中，hash属性不会在用户单击“后退”和“前进”按钮时被更新，而只会在用户单击包含hash的URL时才会被更新。

当通过上述任何一种方式修改URL后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击“后退”按钮都会导航到前一个页面。要禁用这种行为，可以使用replace()方法。这个方法只接受一个参数：要导航到的URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。在调用replace()方法之后，用户不能回到前一个页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html>
<head>
	<title>You won't be able to get back here</title>
</head>
<body>
	<p>Enjoy this page for a second, because you won't be able to coming back here.</p>
	<script type="text/javascript">
		setTimeout(function () {
			location.replace('http://www.wrox.com/');
		} ,1000);
	</script>
</body>
</html>

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

1
2
3
4

//##skipEval

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

位于reload()调用之后的代码可能会也可能不会执行，取决于网络延迟或系统资源等因素。因此，最好将reload()放在代码的最后一行。

【本文内容摘自：《JavaScript高级程序设计》（第3版）Nicholas C.Zakas 著 李松峰 曹力 译】