迹忆客 专注技术分享

本教程将教你四种不同的方法来获取当前 URL。此外，我们将讨论基于 document-* 的方法的缺点。

在 JavaScript 中使用 window.location.href 获取当前 URL

window 是 JavaScript 中的一个全局对象，它包含有关网页的许多属性。这些属性是包含诸如 href 之类的属性的 location 对象。

location 对象中的 href 是网页当前 URL 的字符串表示形式。在我们的下一个代码块中，我们将 window.location.href 的值保存在一个变量中并登录到控制台。

let currentURL = window.location.href;
console.log(currentURL);

谷歌上的输出：

https://www.google.com/

如果你希望通过浏览器开发者工具获取当前 URL，请执行以下操作。

1. 打开网页。
2. 启动开发者工具，并切换到控制台标签页。
3. 输入 window.location.href 并按下键盘上的 Enter 键。

下图显示了我们如何在 Google 搜索中使用 window.location.href。

在 JavaScript 中使用 Document.location.href 获取当前 URL

document 对象包含有关当前文档的信息。此外，它还包含另一个名为 location 的对象。

location 对象包含 href 字符串，它是当前页面的 URL。

let currentURL = documet.location.href;
console.log(currentURL);

DelftStack 上的输出：

https://www.delftstack.com

在你的 Web 浏览器开发者工具中，你可以使用 document.location.href 获取当前 URL。

在 JavaScript 中使用 Document.URL 获取当前 URL

document 对象包含作为当前页面 URL 的 URL 属性。但是，如果当前网页上的一个元素有一个值为 URL 的 name 属性，它将遮蔽真实的 URL。

因此，document.URL 将返回元素而不是网页的 URL。我们将展示它是如何工作的，但首先，让我们看看如何使用 document.URL 获取 URL。

let currentURL = document.URL;
console.log(currentURL);

DuckDuckGo 上的输出：

https://duckduckgo.com

让我们观察一个将 name 属性设置为 document.URL 的元素的效果。首先，导航到 Google 搜索引擎，一旦 Google 加载，使用 Ctrl + Shift + I 启动开发者工具并执行以下操作。

1. 切换到控制台标签页。
2. 输入 document.URL 并按下键盘上的 Enter 键。你应该得到谷歌搜索的 URL。
3. 在搜索输入上使用 Inspect 元素并找到表单元素。
4. 将 name="URL" 添加到表单元素并按键盘上的Enter 键。
5. 在控制台中重新输入 document.URL，然后按键盘上的 Enter 键。

document.URL 返回表单而不是 Google 的 URL。下图显示了将 name="URL" 添加到 Google 搜索表单之前和之后的差异。

在 JavaScript 中使用 Document.baseURI 获取当前 URL

baseURI 是一个字符串，它是文档对象的一部分，它返回网页的当前 URL。就像 document.URL，它的值可以被一个将其 name 属性设置为 baseURI 的元素隐藏起来。

let currentURL = document.baseURI;
console.log(currentURL);

Unsplash 上的输出：

https://unsplash.com

你可以像我们对 document.URL 所做的那样隐藏 document.baseURI 的值。