JavaScript 中 window.location 的作用是什么？

Window.location 是窗口的 location 属性，它是 Location 对象的引用；它表示在该窗口中显示的文档的当前 URL。

由于 window 对象位于作用域链的顶部，因此可以无需 window. 前缀访问 window.location 对象的属性，例如 window.location.href 可以写成 location.href。

以下部分将向您展示如何使用 window 对象的 location 对象属性获取页面的 URL 以及主机名、协议等。您可以使用 window.location.href 属性获取当前页面的完整 URL。

Windows.location.href 属性

这是一个包含完整 URL 的 DOMString。如果更改，关联的文档将导航到新页面。它可以从与关联文档不同的来源设置。

示例

这是 window.location.href 属性的示例。在这里，我们尝试检索页面的 URL：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>JavaScript Get Current URL</title>
</head>
<body>
   <script>
      function getURL() {
         alert("The URL of this page is: " + window.location.href);
      }
   </script>
   <button type="button" onclick="getURL();">Get Page URL</button>
</body>
</html>

Windows.location.protocol 属性

如果我们点击标注为“获取页面URL”的按钮，我们将得到当前URL作为输出。类似地，您可以使用 location 对象的其他属性，如协议、主机名、端口、路径名、搜索等来获取URL的不同部分。

示例

以下是 window.location.protocol 属性的用法：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Get Different Part of a URL</title>
</head>
<body>
   <script>
      document.write(window.location.protocol + "<br>");
   </script>
   <p><strong>Note:</strong> If the URL does not contain a specific component (e.g., port number, and fragment identifier here), it will be set to ''.</p>
</body>
</html>

Windows.location.host 属性

此属性表示主机，即主机名、“:”和 URL 的端口。

示例

以下示例检索并打印 URL 中主机位置的主机名。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>JavaScript Get Different Part of a URL</title>
</head>
<body>
   <script>
      document.write(window.location.host + "<br>");
   </script>
</body>
</html>

window.location.assign() 方法

您可以使用 location 对象的 assign() 方法，即 window.location.assign()，从作为参数提供的 URL 加载另一个资源。在下面给出的示例中，我们尝试在该位置加载新文档。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Load another Resource from a URL</title>
</head>
<body>
   <script>
      function loadHomePage() {
         window.location.assign("https://tutorialspoint.com");
      }
   </script>
   <button type="button" onclick="loadHomePage();">Load Home Page</button>
   <p><strong>Note:</strong> Open the output in a new tab by clicking the arrow next to "Show Output" button then click the above button to see how it works.</p>
</body>
</html>

window.location.replace() 方法

您还可以使用 replace() 方法加载新文档，这与 assign() 方法几乎相同。不同之处在于它不会在浏览器的历史记录中创建条目，这意味着用户将无法使用后退按钮导航到它。以下是此方法的示例。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Replace URL with a New URL</title>
</head>
<body>
   <script>
      function HomePage(){
         window.location.replace("https://tutorialspoint.com");
      }
   </script>
   <button type="button" onclick="HomePage();">Home Page</button>
   <p><strong>Note:</strong> Open the output in a new tab by clicking the arrow next to "Show Output" button then click the above button to see how it works.</p>
</body>
</html>

更新于：2022年8月26日

2K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告