window.location 和 document.location 有什么区别？

window.location 属性

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

由于 window 对象位于作用域链的顶部，因此无需 window 前缀即可访问 window.location 对象的属性。例如，window.location.href 可以写成 location.href。下一节将向您展示如何使用 window 对象的 location 对象属性来获取页面的 URL 以及主机名、协议等。

您可以使用 window.location.href 属性获取当前页面的完整 URL。

示例

以下示例演示了如何使用 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>

执行上述程序后，将显示一个按钮，上面写着“获取页面 URL”。单击此按钮，将显示当前页面的 URL。如果我们单击名为“获取页面 URL”的按钮，我们将得到当前 URL 作为输出。

document.location 属性

这是一个只读属性，它返回当前文档的 URL。以下是 JavaScript 中 document.location 属性的示例：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document.location Properties</title>
</head>
<body>
   <script>
      document.write("The pathname of this file is:"+ document.location.pathname + "<br>");
      document.write("The Protocol used is:"+ document.location.protocol + "<br>");
   </script>
</body>
</html>

使用 document.location 加载 URL

要使 document.location 加载 URL，应将其赋值给一个字符串，然后加载字符串中的 URL。要使用新文档进行赋值或加载，可以使用以下示例。

示例

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document.location </title>
</head>
<body>
   <h2>Document.location</h2>
   <p>To load a new page</p>
   <script>
      function newPage() {
         document.location.assign("https://tutorialspoint.com/");
      }
   </script>
   <button type="button" onclick="newPage() ;">
      Click
   </button>
</body>
</html>

window.location 和 document.location 的区别

window.location 和 document.location 对象都用于获取 URL，但区别在于：

  • window.location 在所有浏览器中都是可读写的。
  • 而 document.location 在 Internet Explorer 中是只读的，在基于 Gecko 的浏览器中是可读写的。

更新于：2022年8月26日

2K+ 浏览量

开启你的职业生涯

完成课程获得认证

开始学习
广告