Javascript 简明教程

JavaScript - Location Object

Window Location Object

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

The location object in JavaScript provides information about the browser’s location, i.e., URLs. It is a built-in property of both the window and document objects. We can access it using either window.location or document.location.

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

The 'location' object contains various properties and methods to get and manipulate the information of the browser’s location (URL).

JavaScript Location Object Properties

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

We can use the properties of the location object to get information of URL:

hash − This property is used to set or get the anchor part of the URL.
host − This property is used to set or get the hostname or port number of the URL.
hostname − This property is used to set the hostname.
href − This property is used to set or get the URL of the current window.
origin − This property returns the protocol, domain, and port of the URL.
pathname − This property updates or gets the path name.
port − This property updates or gets the port of the URL.
protocol − This property updates or gets the protocol.
search − This property is used to set or get the query string of the URL.

Syntax

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

Follow the syntax below to access the location object’s properties and methods −

window.location.property;

或

location.property;

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

You may use the 'window' object to access the 'location' object.

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

Here, we have demonstrated the use of some properties of the location object with examples.

Example: Accessing location host property

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

The location.host property returns the host from the current URL. However, you can also change the host using it.

在以下代码中，我们从 URL 中提取主机名。您会看到它返回 “www.tutorialspoint.com”。

In the below code, we extract the host from the URL. You can see that it returns '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 中使用。也可以使用它来更新协议。

The location.protocol propery is used to get used in the current URL. You can also use it to update the protocol.

试用以下示例使用 location.protocol 属性 -

Try the following example to use the location.protocol property -

<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 的主机名。也可以使用它来主机名。

The location.hostname property returns the host name of the current URL. You can use it to the hostname as well.

试用以下示例使用 location.hostname 属性 –

Try the following example to use location.hostname property –

<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 属性返回当前位置的路径名。可以使用它来设置路径名。

The location.pathname property returns the path name of the current location. You can set the path name using it.

<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 −

We can also use the methods of the location object to navigation to new URLs −

assign(url) − This method loads a new document at the specified URL.
replace(url) − This method replaces the current document with a new document at the specified URL.
reload() − This method reloads the current document.

JavaScript location assign() method

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

The location.assign() method takes the URL and changes the URL in the current window. In short, it opens a new web page.

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

Follow the syntax below to use the location.assign() method in JavaScript −

location.assign();

在下面的代码中，当您单击“Go to home page”按钮时，它会将您重定向到 tutorialpoint 网站的主页。

In the below code, when you click the 'Go to home page' button, it will redirect you to the home page of the tutorialpoint website.

<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 对象的所有属性。

Here, we have listed all properties of the Location object.

Property

Description

hash

It is used to set or get the anchor part of the URL.

host

It is used to set or get the hostname or port number of the URL.

hostname

It is used to set the hostname.

href

It is used to set or get the URL of the current window.

origin

It returns the protocol, domain, and port of the URL.

pathname

To update or get the path name.

port

To update or get the port of the URL.

protocol

To update or get the protocol.

To set or get the query string of the URL.

Location Object Methods List

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

Here, we have listed all methods of the Location object.

Method

Description

assign()

To load resources at a particular URL.

reload()

To reload the web page.

replace()

To replace the resources of the current webpage with another webpage’s resources.

toString()

Returns the URL in the string format.