用 JavaScript 获取当前 URL

在前端开发中,有时需要获取当前网页的 URL 地址,以便进行一些操作或展示。本文将介绍如何使用 JavaScript 获取当前 URL,并提供详细的示例代码和指导意义。

基础方法

JavaScript 提供了 window.location 对象来处理 URL 相关信息。其中,window.location.href 属性可以获取当前 URL 的完整地址:

----- ---------- - ---------------------
------------------------

以上代码输出结果为当前页面的完整 URL 地址,例如:https://example.com/path/to/page.html?query=string#hash

如果只想获取当前页面的主机名(host)和协议(protocol),可以分别使用 window.location.hostnamewindow.location.protocol 属性:

----- -------- - -------------------------
----- -------- - -------------------------
----------------------------------------

以上代码输出结果为当前页面的协议和主机名,例如:https://example.com

URL 解析方法

除了基础方法外,JavaScript 还提供了 URL 对象来解析和操作 URL。需要注意的是,该对象只在部分浏览器中得到支持(如 Chrome、Firefox、Safari 等)。

使用 new URL() 构造函数可以创建一个 URL 实例,然后就可以通过实例的属性获取 URL 的各个组成部分,例如:

----- --- - --- --------------------------

---------------------- -- -----------
-------------------------- -- ------------------
------------------------ -- -------------
---------------------- -- -----

以上代码输出结果分别为当前页面的主机名、路径、查询字符串和哈希值。

除了获取 URL 组成部分外,URL 对象还提供了一些方便的方法来操作 URL。例如,可以使用 url.searchParams.get() 方法获取查询参数:

----- ------------ - -----------------
--------------------------------------- -- ------

以上代码输出结果为查询参数中名为 query 的值。

总结

JavaScript 提供了多种方式来获取当前 URL,包括基础方法和 URL 解析方法。基础方法简单易用,适合处理简单场景;而 URL 解析方法更为灵活,可自由操作 URL 各个组成部分。开发者可以根据实际需求选择不同的方法来获取和操作 URL。

示例代码:https://codepen.io/chatgpt/pen/dyYwZzP

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/7147