JavaScript 获取 URL 汇总
在前端开发中,获取当前页面的 URL 信息是一个非常常见的需求。本文将介绍 JavaScript 中获取 URL 的多种方式,并提供详细的代码示例和解释。
window.location 对象
window.location
是一个包含当前页面 URL 信息的对象。它有很多属性可以用来获取不同部分的 URL,如下所示:
window.location.href
该属性返回完整的 URL,包括协议、主机名、路径和查询字符串等。
---------------------------------- -- ---------------------------------------------------
window.location.protocol
该属性返回协议部分,即 "http:" 或 "https:" 等。
-------------------------------------- -- --------
window.location.host
该属性返回主机名和端口号(如果有),例如 "www.example.com:80"。
---------------------------------- -- -----------------
window.location.hostname
该属性返回主机名,不带端口号。
-------------------------------------- -- -----------------
window.location.port
该属性返回端口号,如果没有指定则返回空字符串。
---------------------------------- -- ----
window.location.pathname
该属性返回路径部分,不包括主机名、协议和查询字符串。
-------------------------------------- -- ---------------
window.location.search
该属性返回查询字符串部分,以问号("?")开头。
------------------------------------ -- ---------------
window.location.hash
该属性返回 URL 中的锚点部分,以井号("#")开头。
---------------------------------- -- -----------
解析 URL 字符串
除了使用 window.location
对象外,我们还可以通过解析 URL 字符串来获取 URL 信息。这可以通过创建一个 <a>
元素并读取其属性来完成。
-------- ------------- - --- ------ - ---------------------------- ----------- - ---- ------ - ----- ------------ --------- ---------------- ----- ------------ --------- ---------------- ----- ------------ --------- ---------------- ------- -------------- ----- ----------- -- - --- --- - ------------------------------------------------------------- --- ------- - -------------- -------------------------- -- ------------------------------------------------------------ ------------------------------ -- -------- -------------------------- -- ----------------- ------------------------------ -- ----------------- -------------------------- -- -- ------------------------------ -- --------------- ---------------------------- -- --------------- -------------------------- -- -----------
总结
以上是 JavaScript 获取 URL 的多种方式。根据具体需求和场景,选择最合适的方法即可。在实际开发中,我们通常会使用 window.location
对象来获取当前页面的 URL 信息,而解析 URL 字符串则更适用于处理其他 URL。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/3174