在前端开发中,有时需要获取当前网页的 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.hostname
和 window.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