JavaScript中location的詳細闡述

一、location是什麼

JavaScript中的location對象代表了當前窗口的URL。它用於獲取或設置當前頁面URL。可以通過window.location或location來訪問location對象。

二、location常用的屬性

1. href

href屬性是一個字元串，用於獲取或設置當前窗口的URL。設置href屬性可以讓當前頁面跳轉到新的URL。

// 獲取當前窗口的URL
let currentUrl = window.location.href;
console.log(currentUrl);

// 跳轉到新的URL
window.location.href = "http://www.example.com";

2. origin

origin屬性返回當前頁面的協議，主機名和埠號。與href不同的是，它不包含路徑和查詢參數。

// 獲取當前頁面的協議，主機名和埠號
let currentOrigin = window.location.origin;
console.log(currentOrigin);

3. protocol

protocol屬性返回當前頁面的協議（如http:、https:等）。

// 獲取當前頁面的協議
let currentProtocol = window.location.protocol;
console.log(currentProtocol);

4. host

host屬性返回當前頁面的主機名和埠號。

// 獲取當前頁面的主機名和埠號
let currentHost = window.location.host;
console.log(currentHost);

5. hostname

hostname屬性返回當前頁面的主機名。

// 獲取當前頁面的主機名
let currentHostname = window.location.hostname;
console.log(currentHostname);

6. port

port屬性返回當前頁面使用的埠號。

// 獲取當前頁面使用的埠號
let currentPort = window.location.port;
console.log(currentPort);

7. pathname

pathname屬性返回當前頁面的路徑部分（即主機名後面的部分，不包含查詢參數和錨點）。

// 獲取當前頁面的路徑部分
let currentPathname = window.location.pathname;
console.log(currentPathname);

8. search

search屬性返回查詢參數部分（即URL中問號後面的部分）。

// 獲取當前頁面的查詢參數部分
let currentSearch = window.location.search;
console.log(currentSearch);

9. hash

hash屬性返回錨點部分（即URL中#號後面的部分）。

// 獲取當前頁面的錨點部分
let currentHash = window.location.hash;
console.log(currentHash);

三、location常用的方法

1. assign()

assign()方法用於將當前窗口跳轉到一個新的URL。

// 跳轉到新的URL
window.location.assign("http://www.example.com");

2. replace()

replace()方法與assign()方法類似，也用於將當前窗口跳轉到一個新的URL。但它不會在瀏覽器的歷史記錄中添加一個新的記錄。

// 跳轉到新的URL，但不在瀏覽器歷史記錄中添加新記錄
window.location.replace("http://www.example.com");

3. reload()

reload()方法用於重新載入當前頁面。它可以接受一個布爾值參數，指示是否清除緩存重新載入。

// 重新載入當前頁面
window.location.reload();

// 清除緩存並重新載入當前頁面
window.location.reload(true);

四、小結

location對象在JavaScript中扮演著重要的角色，它可以用於獲取或設置當前頁面的URL。我們可以使用location的屬性和方法來完成頁面跳轉、獲取URL的各個部分等操作。