JavaScript - Location 物件

視窗位置物件

在 JavaScript 中，location 物件提供有關瀏覽器位置（即 URL）的資訊。它是 window 和 document 物件的內建屬性。我們可以使用 window.location 或 document.location 訪問它。

'location' 物件包含各種屬性和方法，用於獲取和操作瀏覽器位置（URL）的資訊。

JavaScript Location 物件屬性

我們可以使用 location 物件的屬性來獲取 URL 的資訊

hash − 此屬性用於設定或獲取 URL 的錨部分。
host − 此屬性用於設定或獲取 URL 的主機名或埠號。
hostname − 此屬性用於設定主機名。
href − 此屬性用於設定或獲取當前視窗的 URL。
origin − 此屬性返回 URL 的協議、域名和埠。
pathname − 此屬性更新或獲取路徑名。
port − 此屬性更新或獲取 URL 的埠。
protocol − 此屬性更新或獲取協議。
search − 此屬性用於設定或獲取 URL 的查詢字串。

語法

請按照以下語法訪問 location 物件的屬性和方法：

window.location.property;

或

location.property;

您可以使用 'window' 物件來訪問 'location' 物件。

在這裡，我們透過示例演示了一些 location 物件屬性的使用。

示例：訪問 location host 屬性

location.host 屬性從當前 URL 返回主機。但是，您也可以使用它更改主機。

在以下程式碼中，我們從 URL 中提取主機。您可以看到它返回 'www.tutorialspoint.com'。

<html>
<body>
   <div id="output"></div>
   <script>
      const host = location.host;
      document.getElementById("output").innerHTML =
	  "The host of the current location is: " + host;
   </script>
</body>
</html>

輸出

The host of the current location is: www.tutorialspoint.com

示例：訪問 location protocol 屬性

location.protocol 屬性用於獲取當前 URL 中使用的協議。您也可以使用它來更新協議。

嘗試以下示例以使用 location.protocol 屬性 -

<html>
<body>
   <div id = "output"> </div>
   <script>
      document.getElementById("output").innerHTML = 
      "The protocol of the current location is: " + location.protocol;    
   </script>
</body>
</html>

輸出

The protocol of the current location is: https:

示例：訪問 location hostname 屬性

location.hostname 屬性返回當前 URL 的主機名。您也可以使用它來設定主機名。

嘗試以下示例以使用 location.hostname 屬性 –

<html>
<body>
   <div id = "output"> </div>
   <script>
      document.getElementById("output").innerHTML = 
      "The host name of the current location is: " + location.hostname;    
   </script>
</body>
</html>

輸出

The host name of the current location is: www.tutorialspoint.com

示例：訪問 location pathname 屬性

location.pathname 屬性返回當前位置的路徑名。您可以使用它來設定路徑名。

<html>
<body>
   <div id = "output"> </div>
   <script>
      document.getElementById("output").innerHTML = 
      "The protocol of the current location is: " + location.pathname;    
   </script>
</body>
</html>

輸出

The protocol of the current location is: /javascript/javascript_location_object.htm

JavaScript Location 物件方法

我們還可以使用 location 物件的方法導航到新的 URL：

assign(url) − 此方法在指定的 URL 載入新文件。
replace(url) − 此方法用指定 URL 的新文件替換當前文件。
reload() − 此方法重新載入當前文件。

JavaScript location assign() 方法

location.assign() 方法獲取 URL 並更改當前視窗中的 URL。簡而言之，它會開啟一個新的網頁。

語法

請按照以下語法在 JavaScript 中使用 location.assign() 方法：

location.assign();

示例

在以下程式碼中，當您點選“轉到主頁”按鈕時，它會將您重定向到 tutorialpoint 網站的主頁。

<html>
<body>
   <div id="output"></div>
   <button onclick="changePage()">Go to Home Page</button>
   <script>
      let output = document.getElementById("output");
      function changePage() {
	     window.location.assign("https://tutorialspoint.tw/");
      }
   </script>
</body>
</html>

Location 物件屬性列表

在這裡，我們列出了 Location 物件的所有屬性。

屬性	描述
hash	用於設定或獲取 URL 的錨部分。
host	用於設定或獲取 URL 的主機名或埠號。
hostname	用於設定主機名。
href	用於設定或獲取當前視窗的 URL。
origin	返回 URL 的協議、域名和埠。
pathname	更新或獲取路徑名。
port	更新或獲取 URL 的埠。
protocol	更新或獲取協議。
search	設定或獲取 URL 的查詢字串。

Location 物件方法列表

在這裡，我們列出了 Location 物件的所有方法。

方法	描述
assign()	在特定 URL 載入資源。
reload()	重新載入網頁。
replace()	用另一個網頁的資源替換當前網頁的資源。
toString()	以字串格式返回 URL。

列印頁面