如何使用javascript或jQuery实现URL查询参数变化时触发指定事件

完全可以实现，根据URL变更的场景不同，对应处理逻辑如下：

1 无刷新URL变更场景处理 #

这种场景对应通过history.pushState/history.replaceState修改查询参数、页面不会重载的情况（比如前端路由切换时改参数）。原生JS没有直接监听这类URL变更的事件，需要先给history API打补丁触发自定义事件，再做监听即可。

核心实现代码 #

// 给history API打补丁，让修改URL的操作触发自定义urlchange事件
const originalPush = history.pushState;
history.pushState = function (...args) {
  originalPush.apply(this, args);
  window.dispatchEvent(new Event('urlchange'));
};

const originalReplace = history.replaceState;
history.replaceState = function (...args) {
  originalReplace.apply(this, args);
  window.dispatchEvent(new Event('urlchange'));
};

// 记录上一次的查询字符串，避免无意义触发
let lastQuery = location.search;

// 统一监听URL变更（包含用户点击前进后退触发的popstate事件）
window.addEventListener('urlchange', handleQueryChange);
window.addEventListener('popstate', handleQueryChange);

function handleQueryChange() {
  const currentQuery = location.search;
  // 仅查询字符串发生变更时才触发预设操作
  if (currentQuery !== lastQuery) {
    lastQuery = currentQuery;
    // --------------- 你的预设操作写这里 ---------------
    // 示例：解析查询参数
    const params = new URLSearchParams(currentQuery);
    console.log('查询参数变更，当前id值为：', params.get('id'));
    // --------------------------------------------------
  }
}

如果使用jQuery，事件绑定部分可以简化为：

// jQuery版本事件绑定
$(window).on('urlchange popstate', handleQueryChange);

2 页面刷新场景处理 #

如果修改查询参数后页面会重载，不需要额外做监听，直接在页面加载完成后读取location.search处理你的逻辑即可。

注意事项 #

如果项目中使用了Vue Router、React Router这类前端路由框架，直接用框架提供的路由监听钩子即可，不需要手动给history API打补丁。

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