HOWTO · JavaScript
JavaScript 中修改 URL
本文將幫助你瞭解 URL 的更改，而無需使用 JavaScript 重新載入頁面。
瀏覽器的歷史介面控制瀏覽器的會話歷史。它包含在顯示當前頁面的標籤頁或框架中訪問的最後一頁。
操縱此狀態允許你在不重新載入頁面的情況下更改瀏覽器的 URL。在本文中，我們將使用 JavaScript 中的不同方法處理修改 URL。
在 JavaScript 中使用 replaceState() 方法來修改 URL
replaceState() 方法通過將狀態的屬性替換為提供的引數中的屬性來替換歷史中的當前狀態。
語法：
history.replaceState(data, title, url)
資料代表瀏覽器歷史的當前狀態，標題指的是新頁面的標題，URL 指的是新標題頁面的 URL。
例子：
<!DOCTYPE html>
<html>
<head>
<title>
modify URL
</title>
</head>
<body>
<b>
Modify URL without reloading the page
</b>
<p>
To change the current status of the history, click the button below.
</p>
<button onclick="modifyState()">
Modify history state
</button>
<script>
function modifyState() {
let stateObj = { id: "100" };
window.history.replaceState(stateObj, "x 2", "/x2.html");
}
</script>
</body>
</html>
這種方法不是產生一個新的歷史專案，而是更新當前的。當我們希望更新當前歷史記錄的 URL 時，我們使用此方法。
可以通過將所需的 URL 作為字串提供給此方法來更改 URL。這將修改頁面的 URL，而無需重新載入。
輸出：
在點選按鈕之前：
點選按鈕後：
使用 pushState() 方法通過 JavaScript 修改 URL
作為 pushState() 方法的輸入的屬性會建立一個新的歷史記錄條目。在不重新啟動頁面的情況下，這會將當前 URL 更新為指定的新狀態。
語法：
history.pushState(state object, title, url)
例子：
<!DOCTYPE html>
<html>
<head>
<title>
Modify URL
</title>
</head>
<body>
<b>
modify URL without reloading
the page
</b>
<p>
To change the current status of the history, click the button below.
</p>
<button onclick="addState()">
Add history state
</button>
<script>
function addState() {
let stateObj = { id: "100" };
window.history.pushState(stateObj,
"x 2", "/x2.html");
}
</script>
</body>
</html>
可以通過將所需的 URL 作為字串提供給此方法來更改 URL。這將修改頁面的 URL，而無需重新載入。
輸出：
在點選按鈕之前：
點選按鈕後：
