JavaScript - Location 对象

Window 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 的查询字符串。

语法

请按照以下语法访问位置对象的属性和方法 −

window.location.property;

或者

location.property;

您可以使用"window"对象访问"location"对象。

这里，我们通过示例演示了location对象一些属性的使用方法。

示例:访问 location host 属性

location.host 属性从当前 URL 返回 host。但是，您也可以使用它来更改 host。

在下面的代码中，我们从 URL 中提取 host。您可以看到它返回的是"www.cainiaomax.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.cainiaomax.com

示例:访问位置协议属性

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.cainiaomax.com

示例:访问位置路径名属性

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://www.cainiaomax.com/");
      }
   </script>
</body>
</html>

Location 对象属性列表

此处，我们列出了 Location 对象的所有属性。

Location 对象方法列表

这里列出了 Location 对象的所有方法。