window.location.href无法获取完整URL的问题及解决方案

问题场景 #

在大型网站项目中，通过前端路由切换路径到https://www.example.com/script/album时，浏览器地址栏已经显示完整路径，但页面并未刷新（仅在当前页面内加载新内容）。此时使用代码：

var x = window.location.href;

获取到的结果却是https://www.example.com/script/，缺失了末尾的/album部分。

原因分析 #

出现这个问题的核心原因是网站采用了前端路由机制（比如利用HTML5 History API的pushState/replaceState方法），这类机制只会修改浏览器地址栏的URL，不会触发页面的完整刷新。如果你的代码是在路由切换前就已经加载执行的旧脚本环境中运行，window.location.href会保留路由切换前的旧值，无法同步更新后的地址。

解决方法 #

经过尝试，最终通过调用window.document.referrer获取到了正确的完整URL。

补充：更通用的解决方案其实是监听路由变化事件（比如对应前端框架的路由钩子，或者原生的popstate事件），确保在路由更新完成后再读取window.location.href；但在特定场景下，document.referrer可以作为有效的解决手段。

内容的提问来源于stack exchange，提问作者Monzer Mohamd