使用 JavaScript 获取当前 URL

Habdul Hazeez 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 window.location.href 获取当前 URL
  2. 在 JavaScript 中使用 Document.location.href 获取当前 URL
  3. 在 JavaScript 中使用 Document.URL 获取当前 URL
  4. 在 JavaScript 中使用 Document.baseURI 获取当前 URL
使用 JavaScript 获取当前 URL

本教程将教你四种不同的方法来获取当前 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

Firefox 97 中的 Google 主页

在 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 搜索表单之前和之后的差异。

Firefox 97 中的 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 的值。

Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn