需注意的 document 对象也有一个 location 属性，而且 document.location 也包含了当前文档的 URL 信息。尽管 window.location 和 document.location 代表的意思差不多，但两者还是存在一些区别：window.location 中的 location 本身是一个对象，它可以省略 window 直接使用；而 document.location 中的 location 只是一个属性，必须通过 document 来访问它。
下面来看看 location 对象的一些常用属性和方法。
1. location对象属性
location 对象的常用属性见表 1。
| 属性 | 描述 |
|---|---|
| hash | 设置或返回从井号（#）开始的URL （锚） |
| host | 设置或返回主机名和当前 URL 的端口号 |
| hostname | 设置或返回当前 URL 的主机名 |
| href | 设置或返回完整的 URL |
| pathname | 设置或返回当前 URL 的路径部分 |
| port | 设置或返回当前 URL 的端口号 |
| protocol | 设置或返回当前 URL 的协议 |
| search | 设置或返回从问号（?）开始的 URL （查询部分） |
完整的 URL 包括了不同的组成部分。上述属性中，href 属性存放的是当前文档完整的 URL，其他属性则分别描述了 URL 的各个部分。URL 的结构如图 1 所示。
图 1：URL 的结构示意图
2. location对象方法
location对象的常用方法见表 2。
| 方法 | 描述 |
|---|---|
| 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 所示。
图 2：location 对象的应用
当单击“查看当前页面的URL”按钮时将弹出图 3 所示的对话框；
图 3：使用 location 对象获取 URL
当单击“加载新文档”按钮时，页面将跳转到 baidu 网页；当单击“重新加载当前文档”按钮时，将重新加载当前页面。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/24028.html