Location 对象
Location 对象包含当前 URL 的有关信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
Location 对象属性
| 属性 | 描述 |
|---|---|
| hash | 设置或返回从井号 (#) 开始的 URL（锚）。 |
| host | 设置或返回主机名和当前 URL 的端口号。 |
| hostname | 设置或返回当前 URL 的主机名。 |
| href | 设置或返回完整的 URL。 |
| pathname | 设置或返回当前 URL 的路径部分。 |
| port | 设置或返回当前 URL 的端口号。 |
| protocol | 设置或返回当前 URL 的协议。 |
| search | 设置或返回从问号 (?) 开始的 URL（查询部分）。 |
host/hostname/port
host 获取服务器主机名和端口
host 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名称和端口号部分。
语法：location.host
这在动态获取服务器Ip与端口时非常有用，比如 H5 中的 WebSocket 连接服务器时，不可能写死服务器的 ip 与端口，此时使用这种方式即可。
hostname 获取服务器主机名
hostname 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名部分。
语法：location.hostname
port 属性获取服务器端口
port 属性是一个可读可写的字符串，可设置或返回当前 URL 的端口部分。
语法：location.port=portnumber
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
.showInfo {
width: 500px;
height: 250px;
overflow: auto;
background-color: #999999;
color: white;
}
</style>
<!-- JQuery CDN -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
/**获取 Url 地址中的主机名与端口
*/
$("#host").click(function () {
/**
* 获取 url 地址的主机名与端口号，如：192.168.1.20:63333、localhost:63333
* 如果 Url 中是域名，则获取的也是域名；如果 url 是 ip 地址，则获取的也是 ip地址；如果 Url 省略 80 端口，则获取的同样只有主机名
* host 的值始终保持与 url 地址中的一致
* @type {string}
*/
let urlHost = window.location.host;
$(".showInfo").append("host=" + urlHost + "<br>");
});
/**获取 Url 地址中的主机名
*/
$("#hostname").click(function () {
/**
* 获取 url 地址的主机名，如：192.168.1.20、localhost、www.baidu.com
* 如果 Url 中是域名，则获取的也是域名；如果 url 是 ip 地址，则获取的也是 ip地址
* hostname 的值始终保持与 url 地址中的一致
* @type {string}
*/
let urlHostname = location.hostname;
$(".showInfo").append("hostname=" + urlHostname + "<br>");
});
/**获取 Url 地址中的端口部分
*/
$("#port").click(function () {
/**
* 获取 url 地址的端口号，如：63333、8080，如果 Url 中是省略的 80 的端口，则返回为空
* port 的值始终保持与 url 地址中的一致
* @type {string}
*/
let urlPort = location.port;
$(".showInfo").append("port=" + urlPort + "<br>");
});
});
</script>
</head>
<body>
<div class="showInfo">
</div>
<button id="host">host</button>
<button id="hostname">hostname</button>
<button id="port">port</button>
</body>
</html>href 属性
href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。因此可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
.showInfo {
width: 600px;
height: 100px;
overflow: auto;
background-color: #999999;
color: white;
}
</style>
<!-- JQuery CDN -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
/**获取浏览器地址栏 Url 地址
*/
$("#href1").click(function () {
let url = window.location.href;
$(".showInfo").append("url=" + url + "<br>");
});
/**设置浏览器地址栏 新 Url地址，浏览器会自动跳转
*/
$("#href2").click(function () {
/**
* href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。
* 因此，我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。
* 注意：如过加了 http:// 或者 https:// 写一条，则会被当做绝对路径操作
* 如果没有没有加写一条时，如 www.baidu.com,则会被当做相对路径处理，即相对本应用
*/
location.href = "http://www.baidu.com";
});
});
</script>
</head>
<body>
<div class="showInfo">
</div>
<button id="href1">获取当前url</button>
<button id="href2">前往www.baidu.com</button>
</body>
</html>Location 对象方法
| 属性 | 描述 |
|---|---|
| assign() | 加载新的文档。 |
| reload() | 重新加载当前文档。 |
| replace() | 用新的文档替换当前文档。 |
reload() 方法
reload() 方法用于重新加载当前文档。
语法：location.reload(force)
说明：如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。
如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
<!-- JQuery CDN -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
/**普通刷新当前文档
*/
$("#reload1").click(function () {
window.location.reload();
});
/**强制刷新当前文档
*/
$("#reload2").click(function () {
location.reload(true);
});
});
</script>