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.host 属性

location.host 属性返回当前 URL 的主机。然而，你也可以用它来更改主机。

在下面的代码中，我们从 URL 中提取主机。你可以看到它返回的是 'www.tutorialspoint.com'。

<html>
<body>
   <div id="output"></div>
   <script>
      const host = location.host;
      document.getElementById("output").innerHTML =
   "当前位置的主机是: " + host;
   </script>
</body>
</html>

输出：当前位置的主机是: www.tutorialspoint.com

示例：访问 location.protocol 属性

location.protocol 属性用于获取当前 URL 中使用的协议。你也可以用它来更新协议。

尝试下面的例子来使用 location.protocol 属性：

<html>
<body>
   <div id="output"></div>
   <script>
      document.getElementById("output").innerHTML = 
      "当前位置的协议是: " + location.protocol;    
   </script>
</body>
</html>

输出：当前位置的协议是: https:

示例：访问 location.hostname 属性

location.hostname 属性返回当前 URL 的主机名。你可以使用它来设置主机名。

尝试下面的例子来使用 location.hostname 属性：

<html>
<body>
   <div id="output"></div>
   <script>
      document.getElementById("output").innerHTML = 
      "当前位置的主机名是: " + location.hostname;    
   </script>
</body>
</html>

输出：当前位置的主机名是: www.tutorialspoint.com

示例：访问 location.pathname 属性

location.pathname 属性返回当前位置的路径名称。你可以用它来设置路径名称。

<html>
<body>
   <div id="output"></div>
   <script>
      document.getElementById("output").innerHTML = 
      "当前位置的路径是: " + location.pathname;    
   </script>
</body>
</html>

输出：当前位置的路径是: /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(url);

示例

在下面的代码中，当你点击 'Go to Home Page' 按钮时，它将会重定向你到 tutorialpoint 网站的主页。

<html>
<body>
   <div id="output"></div>
   <button onclick="changePage()">前往首页</button>
   <script>
      let output = document.getElementById("output");
      function changePage() {
      window.location.assign("https://www.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。