Javascript 简明教程

JavaScript - Location Object

Window Location Object

JavaScript 中的 location 对象提供有关浏览器位置(即 URL)的信息。它是 window 和 document 对象的内置属性。我们可以使用 window.location 或 document.location 访问它。

“location”对象包含多个属性和方法,用于获取和修改浏览器位置(URL)的信息。

JavaScript Location Object Properties

我们可以使用 location 对象的属性来获取 URL 的信息:

  1. hash − 此属性用于设置或获取 URL 的锚部分。

  2. host − 此属性用于设置或获取 URL 的主机名或端口号。

  3. hostname − 此属性用于设置主机名。

  4. href − 此属性用于设置或获取当前窗口的 URL。

  5. origin − 此属性返回 URL 的协议、域名和端口。

  6. pathname − 此属性更新或获取路径名称。

  7. port − 此属性更新或获取 URL 的端口。

  8. protocol − 此属性更新或获取协议。

  9. search − 此属性用于设置或获取 URL 的查询字符串。

Syntax

按照以下语法访问 location 对象的属性和方法 -

window.location.property;

location.property;

您可以使用 “window” 对象来访问 “location” 对象。

此处,我们通过示例演示了 location 对象的部分属性的用法。

Example: Accessing location host property

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

Example: Accessing location protocol property

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:

Example: Accessing location hostname property

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

Example: Accessing location pathname property

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 Object Methods

还可以使用 location 对象的 methods 导航到新 URL −

  1. assign(url) - 该方法在指定 URL 加载新的文档。

  2. replace(url) - 该方法使用指定 URL 中的新文档替换当前文档。

  3. reload() - 该方法重新加载当前文档。

JavaScript location assign() method

location.assign() 方法,将 URL 在当前窗口中进行更改。简言之,它将打开新网页。

遵循以下语法在 JavaScript 中使用 location.assign() 方法 −

location.assign();

在下面的代码中,当您单击“Go to home page”按钮时,它会将您重定向到 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.tutorialspoint.com/");
      }
   </script>
</body>
</html>

Location Object Properties List

此处列出 Location 对象的所有属性。

Property

Description

hash

用于设置或获取 URL 的锚部分。

host

用于设置或获取 URL 的主机名或端口号。

hostname

用于设置主机名。

href

用于设置或获取当前窗口的 URL。

origin

返回 URL 的协议、域名和端口。

pathname

更新或获取路径名。

port

更新或获取 URL 的端口。

protocol

更新或获取协议。

search

设置或获取 URL 的查询字符串。

Location Object Methods List

在此,我们列出了 Location 对象的所有方法。

Method

Description

assign()

加载特定 URL 上的资源。

reload()

重新加载网页。

replace()

用另一个网页的资源替换当前网页的资源。

toString()

以字符串格式返回 URL。