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

JavaScript location对象用法详解

2011-06-08 18:17 1131 查看

BOM（浏览器对象模型）中最有用的对象之一就是location，它是window对象和document对象的属性。location对象表示载入窗口的URL，此外，它还可以解析URL：

hash：如果URL中包含有“#”，该方法将返回该符号之后的内容（例如：http://www.sunchis.com/index.html#welcome的hash是“#welcome”）。

host：服务器的名字，例如www.sunchis.com。

hostname：通常等于host，有时会省略前面的www。

href：当前页面载入的完整URL。

pathname：URL中主机名之后的部分。例如：http://www.sunchis.com/html/js/jsbasic/2010/0319/88.html的pathname是“/html/js/jsbasic/2010/0319/88.html”。

port：URL中声明的请求端口。默认情况下，大多数URL没有端口信息（默认为80端口），所以该属性通常是空白的。像http://www.sunchis.com:8080/index.html这样的URL的port属性为8080。

protocol：URL中使用的协议，即双斜杠（//）之前的部分。例如http://www.sunchis.com中的protocol属性等于http:，ftp://www.sunchis.com的protocol属性等于ftp:。

search：执行GET请求的URL中的问号（?）后的部分，又称查询字符串。例如http://www.sunchis.com/search.html?tern=sunchis中的search属性为?term=sunchis。

<script type="text/javascript">
document.write(
"hash:"+location.hash+"<br>"+
"host:"+location.host+"<br>"+
"hostname:"+location.hostname+"<br>"+
"href:"+location.href+"<br>"+
"pathname:"+location.pathname+"<br>"+
"port:"+location.port+"<br>"+
"protocol:"+location.protocol+"<br>"+
"search:"+location.search
);
</script>

下面就是在当前页面执行上述代码的结果，请参考：

hash：
host：www.sunchis.com
hostname：www.sunchis.com
href：http://www.sunchis.com/html/js/jsbasic/2010/0319/89.html
pathname：/html/js/jsbasic/2010/0319/89.html
port：
protocol：http:
search：
location.href是最常用的属性，用于获取或设置窗口的URL，改变该属性，就可以跳转到新的页面：

<script type="text/javascript">
location.href = "http://www.sunchis.com";
</script>

上面代码的作用是：打开页面后将会跳转到http://www.sunchis.com的页面。

assign()方法也可实现上述操作：

<script type="text/javascript">
location.assign("http://www.sunchis.com");
</script>

如果不想让包含脚本的页面能从浏览器的历史记录中访问，replace()方法可以做到这一点。replace()方法所做的操作与assign()方法一样，但它多了一步操作，即从浏览器的历史记录中删除了包含脚本的页面，这样就不能通过浏览器的后退按钮和前进按钮来访问它了，assign()方法却可以通过后退按钮来访问上个页面。你可以自己测试一下这段关于replace()方法的代码：

<html>
<head>
<title>不能访问此页面的历史页面</title>
</head>
<body>
<p>测试一下效果，请等待一秒钟……</p>
<p>然后点击浏览器的“后退按钮”，你会发现什么？</p>
<script type="text/javascript">
setTimeout(function(){
location.replace("http://www.sunchis.com");
},1000);
</script>
</body>
</html>

location对象还有个reload()方法，可以重新载入当前页面。reload()方法有两种模式，即从浏览器的缓存中重载，或从服务器端重载。究竟采用哪种模式由该方法的参数决定。

false：从缓存中重新载入页面；

true：从服务器重新载入页面；

无参数：从缓存中载入页面，如果参数省略，默认值为false。

location.reload(true);    //从服务器重载当前页面
location.reload(false);   //从浏览器缓存中重载当前页面
location.reload();        //从浏览器缓存中重载当前页面

注意：

在reload()方法执行后，再其后面的代码可能被执行，也可能不被执行，这由网络延迟和系统资源因素决定。因此，最好把reload()的调用放在代码的最后一行。

文章的一开始就提到location是window对象和document对象的属性，因此，window.location和document.location是等价的，可以交互使用。

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

标签：

相关文章推荐

新的分享

章节导航