JavaScript获取浏览器当前URL失效：Discord授权跳转后无法检测URL变化

核心问题根源 #

你的代码出现检测不到URL变化的问题，本质是两个完全不兼容JS运行机制的设计缺陷叠加导致的：

• 无退出条件的同步死循环完全阻塞了JS主线程，让浏览器的页面跳转流程根本没法执行
• 跨页面跳转时原页面的脚本上下文会直接销毁，旧页面的脚本根本没有能力读取新页面的URL

具体问题拆解 #

• 死循环阻塞主线程问题
  JavaScript是单线程运行模型，所有同步代码执行期间，浏览器的导航跳转、地址栏更新、页面渲染动作都需要排队等同步代码执行完成。你在执行window.location.href = URL触发跳转指令后，立刻进入没有退出条件的while(true)循环，直接占满了整个JS主线程，浏览器根本没有机会执行后续的地址栏更新、页面跳转动作。整个循环执行期间，你读到的永远是初始状态下的旧URL，完全感知不到任何后续的页面状态变化。
• 跨页面上下文隔离问题
  就算去掉死循环，顺利完成了从MYURL.com到带令牌参数的回调页的整页跳转，这两个页面属于完全独立的运行上下文：旧页面的JS脚本会随着页面卸载被全部清除，根本不可能持续运行到新页面上读取URL内容。

正确实现方案 #

根据你的业务场景，分两种情况调整逻辑：

场景1：授权流程是同域SPA前端路由跳转（无整页刷新） #

这种情况不需要轮询URL，直接用浏览器原生的事件监听机制捕获路由变化：

• 对基于history模式的路由跳转，监听popstate事件捕获前进后退、路由更新带来的URL变化
• 对基于hash模式的路由跳转，直接监听hashchange事件
• 如果是框架内部主动触发的pushState/replaceState路由更新，可以在路由切换的钩子函数里直接读取当前URL，不需要做循环检测

参考实现代码：

// 监听history模式下的URL变化
window.addEventListener('popstate', () => {
  console.log('检测到URL变更：', window.location.href)
})
// 监听hash模式下的URL变化
window.addEventListener('hashchange', () => {
  console.log('检测到hash路由变更：', window.location.href)
})

场景2：授权回调是整页跳转加载的新页面 #

这种场景完全不需要在旧页面做持续URL检测，直接把读取令牌的逻辑放到回调页面的初始化流程里：当用户从Discord授权页跳转回MYURL.com/token路径、新页面加载完成时，直接在页面的初始化脚本里读取当前URL，解析提取里面带的令牌参数即可。

参考实现代码：

// 回调页面加载完成后读取URL中的令牌参数
window.addEventListener('load', () => {
  // 从URL查询参数中提取授权令牌
  const searchParams = new URLSearchParams(window.location.search)
  const authToken = searchParams.get('access_token')
  if (authToken) {
    console.log('成功获取授权令牌：', authToken)
  }
})

注意：原代码里的while(true)写法不仅完全起不到检测URL的作用，还会直接让页面卡死无响应，绝对不能在生产代码中使用。

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