JavaScript 中修改 URL

Shiv Yadav 2023年1月30日 2022年5月5日 JavaScript JavaScript Event
  1. 在 JavaScript 中使用 replaceState() 方法來修改 URL
  2. 使用 pushState() 方法通過 JavaScript 修改 URL
JavaScript 中修改 URL

瀏覽器的歷史介面控制瀏覽器的會話歷史。它包含在顯示當前頁面的標籤頁或框架中訪問的最後一頁。

操縱此狀態允許你在不重新載入頁面的情況下更改瀏覽器的 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,而無需重新載入。

輸出:

在點選按鈕之前:

修改前的 javascript URL

點選按鈕後:

javascript 使用 replaceState 修改 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,而無需重新載入。

輸出:

在點選按鈕之前:

當前狀態下的 javascript url

點選按鈕後:

javascript 使用 pushState 修改 URL

Author: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

相關文章 - JavaScript Event

  • 在 Onclick 事件中呼叫多個 JavaScript 函式
  • 在 JavaScript 中的 HTML 影象標籤上新增 Onclick 事件
  • 使用 JavaScript 模擬點選
  • JavaScript 中的事件目標
  • 用 JavaScript 在 iframe 中實現一個 onload 事件
  • 在 JavaScript 中檢測鍵盤輸入事件