如何监听URL Query参数值变化并触发指定函数？

要捕获some_key这类Query参数的变化，得覆盖两种常见场景：浏览器前进/后退导致的URL变化，以及通过JS主动修改URL（比如用history.pushState）的情况，下面是具体实现：

1. 先写个工具函数提取Query参数 #

先封装一个通用函数，方便快速获取指定Query参数的值：

function getQueryParam(key) {
  return new URLSearchParams(window.location.search).get(key);
}

2. 处理浏览器前进/后退：监听popstate事件 #

浏览器前进、后退操作会触发popstate事件，我们可以在这个事件里对比参数变化：

// 记录初始的some_key值
let prevSomeKey = getQueryParam('some_key');

window.addEventListener('popstate', () => {
  const currentSomeKey = getQueryParam('some_key');
  // 对比新旧值，不一样就调用目标函数
  if (currentSomeKey !== prevSomeKey) {
    yourTargetFunction(currentSomeKey);
    prevSomeKey = currentSomeKey;
  }
});

3. 处理主动修改URL的情况：重写pushState/replaceState #

直接调用history.pushState或history.replaceState修改URL时，不会触发popstate事件，所以需要重写这两个方法，手动触发自定义事件：

// 重写pushState
const originalPushState = history.pushState;
history.pushState = function(state, title, url) {
  originalPushState.call(this, state, title, url);
  window.dispatchEvent(new Event('pushstate'));
};

// 重写replaceState
const originalReplaceState = history.replaceState;
history.replaceState = function(state, title, url) {
  originalReplaceState.call(this, state, title, url);
  window.dispatchEvent(new Event('replacestate'));
};

然后监听这两个自定义事件，同样检查参数变化：

function checkSomeKeyChange() {
  const currentSomeKey = getQueryParam('some_key');
  if (currentSomeKey !== prevSomeKey) {
    yourTargetFunction(currentSomeKey);
    prevSomeKey = currentSomeKey;
  }
}

window.addEventListener('pushstate', checkSomeKeyChange);
window.addEventListener('replacestate', checkSomeKeyChange);

4. 可选：页面加载时执行一次函数 #

如果需要在页面初始加载时也触发目标函数，直接调用即可：

yourTargetFunction(prevSomeKey);

完整示例代码 #

把上面的逻辑整合起来，替换yourTargetFunction为你的业务函数就行：

function getQueryParam(key) {
  return new URLSearchParams(window.location.search).get(key);
}

// 替换成你需要调用的指定函数
function yourTargetFunction(newValue) {
  console.log('some_key的值更新为:', newValue);
  // 这里写你的业务逻辑
}

// 记录初始值
let prevSomeKey = getQueryParam('some_key');

// 页面加载时执行一次（可选）
yourTargetFunction(prevSomeKey);

// 监听浏览器前进后退
window.addEventListener('popstate', () => {
  const currentSomeKey = getQueryParam('some_key');
  if (currentSomeKey !== prevSomeKey) {
    yourTargetFunction(currentSomeKey);
    prevSomeKey = currentSomeKey;
  }
});

// 重写pushState和replaceState
const originalPushState = history.pushState;
history.pushState = function(state, title, url) {
  originalPushState.call(this, state, title, url);
  window.dispatchEvent(new Event('pushstate'));
};

const originalReplaceState = history.replaceState;
history.replaceState = function(state, title, url) {
  originalReplaceState.call(this, state, title, url);
  window.dispatchEvent(new Event('replacestate'));
};

// 监听自定义事件
function checkSomeKeyChange() {
  const currentSomeKey = getQueryParam('some_key');
  if (currentSomeKey !== prevSomeKey) {
    yourTargetFunction(currentSomeKey);
    prevSomeKey = currentSomeKey;
  }
}

window.addEventListener('pushstate', checkSomeKeyChange);
window.addEventListener('replacestate', checkSomeKeyChange);

内容的提问来源于stack exchange，提问作者Tino Jose Thannippara