如何使用 jQuery 修改目前網址

在網頁開發中，我們經常需要透過程式碼來取得或修改目前頁面的 URL。而 jQuery 是目前最受歡迎的 JavaScript 函式庫之一，它提供了方便的 URL 操作函數。本文將介紹如何使用 jQuery 修改目前網址。

一、取得目前網址

在 jQuery 中，我們可以使用 window.location 物件來取得目前頁面的 URL。該物件具有許多有用的屬性，例如 href、protocol、host、pathname、search、hash 等等。以下是一個範例：

console.log(window.location.href);

執行程式碼後，控制台將輸出目前頁面的完整 URL。

二、修改目前網址

如果我們想要在不重新整理頁面的情況下修改目前網址，可以使用 pushState() 或 replaceState() 方法。這兩個方法均定義在 History 物件中，可以使用 window.history 物件呼叫。它們的差異在於，pushState() 方法會在瀏覽器歷史記錄中新增一個條目，而 replaceState() 方法則會將目前條目替換為新的條目。

下面是 pushState() 方法的使用範例：

window.history.pushState(null, null, '/new_url');

此方法接受三個參數：

1. state：目前狀態物件。可以是任意類型的 JavaScript 對象，常常用來儲存目前狀態的資料。
2. title：新頁面的標題。大多數瀏覽器忽略該參數。
3. url：新頁面的 URL。一般設定為相對路徑或絕對路徑。

執行上述程式碼後，目前頁面的 URL 將被修改為 /new_url，但不會重新整理頁面。

三、監聽 URL 變更事件

當使用 pushState() 或 replaceState() 方法改變 URL 時，瀏覽器並不會自動重新整理頁面。如果使用者直接貼上修改後的 URL 到瀏覽器網址列中，也不會觸發頁面刷新。因此，如果我們想要在 URL 發生變更時進行對應的操作，就需要監聽 URL 變更事件。

在 jQuery 中，可以使用 on() 方法來監聽 URL 變更事件。此方法接受兩個參數，第一個參數為事件名稱，第二個參數為事件處理函數。我們可以監聽 popstate 事件，在事件處理函數中取得目前 URL，然後進行對應的操作。

以下是監聽 URL 變更事件的程式碼範例：

$(window).on('popstate', function() {
  console.log(window.location.href);
});

執行上述程式碼後，每當 URL 發生變更時，控制台就會輸出新的 URL。

總結

本文介紹如何使用 jQuery 修改目前網址。我們可以使用 window.location 物件來取得目前網址，使用 pushState() 或 replaceState() 方法修改網址，使用 on() 方法監聽 URL 變更事件。這些方法能夠幫助我們實現豐富的互動效果，提升使用者體驗。

以上是如何使用 jQuery 修改目前網址的詳細內容。更多資訊請關注PHP中文網其他相關文章！