JS获取当前页的URL与window.location.href简单方法
在前端开发中，经常需要获取当前网页的 URL。JavaScript 提供了两种方式来获取当前网页的 URL：window.location 和 window.location.href。本文将介绍这两种方法的使用、区别和示例代码，并给出一些指导意义。
window.location
window.location 是一个对象，包含了当前页面的 URL 信息。它有以下属性：
location.href：完整的 URL，包括协议、域名、端口、路径和查询字符串。location.protocol：协议名称（如 http: 或 https:)。location.host：包括域名和端口号（如果有）。location.hostname：域名部分。location.port：端口号部分。location.pathname：URL 中的路径部分。location.search：URL 中的查询字符串部分。location.hash：锚点部分。
下面是一个使用 window.location 的示例：
----------------------------------
输出结果为：https://www.example.com/path/to/page?param1=value1¶m2=value2#anchor
window.location.href
window.location.href 是 window.location 对象的一个属性，表示当前页面的完整 URL。它等价于 window.location.toString() 和 document.URL。可以直接修改该属性的值来实现页面跳转。
下面是一个使用 window.location.href 的示例：
----------------------------------
输出结果同上。
区别
虽然 window.location 和 window.location.href 都可以获取当前页面的 URL，但它们有一些区别：
window.location是一个对象，包含了很多属性，而window.location.href只是其中的一个属性。window.location对象可以直接修改其中的属性（如location.href），实现页面跳转；而window.location.href只能通过赋值来实现页面跳转。- 在某些情况下，
window.location对象的某些属性可能会被浏览器自动更新，而window.location.href不会。
指导意义
在实际开发中，通常使用 window.location.href 来获取当前页面的 URL。这是因为它简单易懂，且可以直接用于实现页面跳转。如果需要获取更详细的 URL 信息，可以使用 window.location 对象。
除了以上两种方式，还可以使用 document.URL 和 location.toString() 来获取当前页面的 URL。它们的效果和 window.location.href 是相同的。
最后，需要注意的是，在某些情况下，由于浏览器的缓存机制或跨域问题，获取到的 URL 可能不同于当前页面的真实 URL。因此，在实际开发中，需要结合具体情况选择合适的 URL 获取方式。
示例代码
下面是一个获取当前页面 URL 的示例代码：
-- -- -------------------- ---------------------------------- -- -- --------------- ------------------------------------ - ---- - -------------------- - ------------------------ - ---------------------- - ---------------------- -- -- ------------ -------------------------- -- -- ------------------- ---------------------------------
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/772