在前端开发中，我们常常需要使用到当前页面的 URL 地址，而 window.location.href 和 top.location.href 都可以获取当前页面的 URL。虽然它们看起来很相似，但它们之间确实存在一些重要的差异。本文将介绍这两个属性之间的区别，并提供示例代码。
window.location.href
window.location 对象表示当前载入文档的 URL 信息，其中 location.href 属性包含了完整的 URL 地址（包括协议、主机、路径、查询参数和片段）。因此，我们可以通过访问 window.location.href 属性来获取当前页面的 URL 地址。
示例代码：
console.log(window.location.href); // 输出当前页面的 URL 地址
top.location.href
top.location 属性表示最顶层窗口的 URL 地址，它与 window.location 不同的是，它始终指向浏览器地址栏中显示的 URL，即使该页面被嵌套在其他框架或窗口中。
示例代码：
console.log(top.location.href); // 输出最顶层窗口的 URL 地址
差异分析
在大多数情况下，window.location.href 和 top.location.href 所返回的值是相同的，但它们之间确实存在一些重要的差异。
首先，top.location.href 不能被修改。如果我们试图通过代码改变 top.location.href 的值，浏览器会禁止该操作并给出错误提示，这是为了防止页面被恶意的代码所劫持。但是，我们可以通过 window.location.href 来改变当前页面的 URL 地址。
其次，在嵌套框架或窗口中，window.location.href 只能获取当前框架或窗口的 URL 地址，而 top.location.href 则始终指向最顶层窗口的 URL 地址。因此，在跨域场景下，如果我们需要获取另一个域名下的页面的 URL 地址，只能使用 top.location.href。
最后，需要注意的是，当页面通过重定向或其他方式进行跳转时，window.location.href 会被更新为新页面的地址，而 top.location.href 仍然保持原来的值。因此，如果我们需要判断当前页面是否发生了跳转，可以通过比较 window.location.href 和 top.location.href 的值来实现。
总结与指导意义
本文介绍了 window.location.href 和 top.location.href 之间的区别。虽然它们看起来很相似，但在实际应用中，我们需要根据具体的需求来选择合适的属性。
通常情况下，如果我们需要获取当前页面的 URL 地址，可以使用 window.location.href。如果我们需要获取最顶层窗口的 URL 地址或者需要在跨域场景下获取其他域名下的页面的 URL 地址，可以使用 top.location.href。
同时，需要注意的是，在处理跳转、刷新等场景时，window.location.href 和 top.location.href 的值可能会发生变化，我们需要及时更新相关的状态和数据。
希望本文能够对你了解 window.location.href 和 top.location.href 之间的差异有所帮助，并指导你在实际项目中做出正确的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11899