首页 > 编程笔记 > JavaScript笔记

JS location对象的使用

location 对象包含了浏览器当前显示的文档的 URL 信息。当 location 对象调用 href 属性设置 URL 时，可使浏览器重定向到该 URL。location 对象是 window 对象的一个对象类型的属性，因而可以使用 window.location 来引用它，使用时也可以省略 window。

需注意的 document 对象也有一个 location 属性，而且 document.location 也包含了当前文档的 URL 信息。尽管 window.location 和 document.location 代表的意思差不多，但两者还是存在一些区别：window.location 中的 location 本身是一个对象，它可以省略 window 直接使用；而 document.location 中的 location 只是一个属性，必须通过 document 来访问它。

下面来看看 location 对象的一些常用属性和方法。

1. location对象属性

location 对象的常用属性见表 1。

表 1：location 对象的常用属性
属性 描述
hash 设置或返回从井号（#）开始的URL （锚）
host 设置或返回主机名和当前 URL 的端口号
hostname 设置或返回当前 URL 的主机名
href 设置或返回完整的 URL
pathname 设置或返回当前 URL 的路径部分
port 设置或返回当前 URL 的端口号
protocol 设置或返回当前 URL 的协议
search 设置或返回从问号（?）开始的 URL （查询部分）

完整的 URL 包括了不同的组成部分。上述属性中，href 属性存放的是当前文档完整的 URL，其他属性则分别描述了 URL 的各个部分。URL 的结构如图 1 所示。
URL的结构示意图
图 1：URL 的结构示意图

2. location对象方法

location对象的常用方法见表 2。
表 2：location 对象的常用方法
方法 描述
assign() 加载新的文档
reload() 重新加载当前文档
replace() 用新的文档替换当前文档，且无需为它创建一个新的历史记录

3. 访问location对象的属性和方法的方式

访问 location 对象的属性和方法的方式如下：

[window.]location.属性
[window.]location.方法(参数1,参数2,…)


【例 1】location 对象的使用。 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>location对象的使用</title>
<script>
function loadNewDoc(){
     window.location.assign("http://www.baidu.com");
}
function reloadDoc(){
     window.location.reload();
}
function getDocUrl(){
     alert("当前页面的URL是："+window.location.href);
}
</script>
</head>
<body>
     <input type="button" value="加载新文档" onClick="loadNewDoc()"/> 
     <input type="button" value="重新加载当前文档" onClick="reloadDoc()"/>
     <input type="button" value="查看当前页面的URL" onClick="getDocUrl()"/>
</body>
</html>
上述脚本代码分别调用了 location 的 assign()、reload() 和 href 属性实现加载 baidu 网页、重新加载当前页面和获取当前页面的 URL。上述代码在 Chrome 浏览器中的运行结果如图 2 所示。
location对象的应用
图 2：location 对象的应用
当单击“查看当前页面的URL”按钮时将弹出图 3 所示的对话框；
使用location对象获取URL
图 3：使用 location 对象获取 URL

当单击“加载新文档”按钮时，页面将跳转到 baidu 网页；当单击“重新加载当前文档”按钮时，将重新加载当前页面。

所有教程

优秀文章