Location 物件使用詳解
阿新 • • 發佈：2018-11-30
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>