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.com/");
      }
   </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。

打印页面