location 提供了与当前窗口中加载的文档有关的信息以及导航功能。它既是 window 对象的属性,又是 document 对象的属性,即 window.location 与 document.location 引用的是同一个对象。它还能把 URL 解析为独立的片段,下面列出 location 对象的所有属性(省略了 location 前缀):
属性名 | 举例 | 说明 |
---|---|---|
hash | “#contents” | 返回 URL 中的 hash;如果没有,则返回空字符串。 |
host | “xxx.com:8080” | 返回服务器 URL 和端口号。 |
hostname | “xxx.com” | 返回不带端口的服务器 URL。 |
href | “http://xxx.com” | 返回当前加载页面的完整 URL。location.toString() 也返回该值。 |
pathname | “/image/” | 返回 URL 中的目录与文件名 |
port | “8080” | 返回 URL 中的端口号。 |
protocol | “http:” | 返回页面使用的协议。 |
search | “?q=javascript” | 返回 URL 中的查询字符串。以问号开头。 |
1 查询字符串参数
创建一个函数,它可以解析查询字符串,然后返回包含所有参数的一个对象:
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;
}
可以这样使用:
//假设查询字符串:?l=java&num=100
var args = getQueryStringArgs();
console.log(args["l"]);//java
console.log(args["num"]);//100
2 位置操作
使用 assign() 方法,会立即打开新的 URL 并在浏览器的历史记录中生成一条记录:
location.assign("http://xxx.com");
location.href 或 window.location 方法设置一个 URL 值,它们会在内部调用 assign() 方法:
window.location = "http://xxx.com";
location.href = "http://xxx.com";
最常用的是 location.href
。
修改 location 对象的其他属性也会改变当前加载的页面:
//假设初始是 http://www.163.com/images/
//变为 http://www.163.com/images/#section1
location.hash = “#section1”;
//变为 http://www.163.com/images/q=javascript
location.search = "?q=javascript";
//变为 http://www.sina.com/images/
location.hostname = "www.sina.com";
//变为 http://www.163.com/mydir/
location.pathname = "mydir";
//变为 http://www.163.com:8080/images/
location.port = 8080;
注意: IE8、Firefox 1、Safari 2+、Opera 9+ 和 Chrome 中,修改 hash 值会生成一条浏览器的历史记录。
每次修改 location 属性,页面都会以新的 URL 重新加载,并生成一条浏览器的历史记录,因此点击“后退”键会导航到前一个页面。可以使用 replace() 方法,它既可以导航到相应的 URL,而且还不会在历史记录中生成新记录:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>You won't be able to get back here(浏览器位置改变)</title>
</head>
<body>
<p>Enjoy this page for a second, because you won't coming back here.</p>
<script type="text/javascript">
setTimeout(function () {
location.replace("http://www.163.com");
}, 1000);
</script>
</body>
</html>
reload() 方法是重新加载当前的页面:
location.reload();//重新加载(可能从缓存中加载)
location.reload(true);//重新加载(直接从服务器直接加载)
reload() 之后的代码可以会执行也可能不会执行,这取决于网络延迟或系统资源的不定因素,因此最好将 reload() 放在代码的最后一行。