您的位置：首页 > Web前端 > JavaScript

说说 JavaScript 中 BOM 的 location 对象

2017-04-10 14:44 507 查看

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() 放在代码的最后一行。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航