【JavaScript】window.location 和 window.location.href 比較

by Posted on

window.location 和 window.location.href 都是用來操作瀏覽器中的 URL，但它們之間有一些細微的差異和使用時機：

1. window.location

  • window.location 是一個對象：它表示當前瀏覽器窗口的位址（URL），並包含多個屬性，如 href、hostname、pathname、protocol 等。
  • 用於導向或獲取其他屬性：
    • 你可以直接使用 window.location 導向到另一個 URL。
    • 同時，window.location 提供了操作和分析 URL 各部分的屬性。例如：
    • window.location.hostname：獲取或設置主機名（例如 www.example.com）。
    • window.location.pathname：獲取或設置 URL 的路徑部分（例如 /path/to/page）。
    • window.location.protocol：獲取或設置協議（例如 https:）。
    • 還可以使用 window.location.assign()、window.location.replace() 等方法來進行導航操作。

2. window.location.href

  • window.location.href 是一個字符串：它代表完整的 URL 字串，等同於 window.location 的 href 屬性。
  • 用於獲取或設置完整的 URL：
    • 當你想要獲取當前頁面的完整 URL 時，可以使用 window.location.href。
    • 當你想要直接導向到另一個 URL 時，可以設置 window.location.href。
    • 舉例：window.location.href = "https://www.example.com"; 將會直接導向到該 URL。

比較和使用時機

  • 功能上：
  • window.location：更強大，因為它是一個對象，提供了對 URL 各部分的精細操作。
  • window.location.href：主要用於讀取或設置完整的 URL。
  • 使用時機：
  • 只想改變頁面 URL：兩者都可以使用，通常 window.location.href 更直接。
  • 想要操作 URL 的某些部分：使用 window.location 的特定屬性，如 protocol、hostname 等。

簡單來說：如果你只是想改變或獲取整個 URL，使用 window.location.href 就足夠了；如果你需要對 URL 進行更多操作或了解其結構，使用 window.location 會更靈活。

本文由 ChatGPT 產生

Post Views: 19

Published by 小書僮