如何不重载页面修改URL？如何创建URL变更触发的监听事件？

失效原因说明 #

onpopstate事件仅在浏览器触发历史记录导航（用户点击前进/后退按钮、调用history.back()/history.forward()等方法）时触发，手动修改历史记录的API调用不会触发该事件；hashchange事件仅监听URL中#后的片段变更，不会响应?开头的查询参数变更，因此你之前的监听方案无效。

1. 不重载页面修改带查询参数的URL #

使用浏览器原生History API的replaceState或pushState方法即可实现同源下URL修改不重载页面，这也是Shopify变体切换时修改URL的底层实现：

// 基于当前URL构造新URL对象
const targetUrl = new URL(window.location);
// 修改variant查询参数为目标变体ID
targetUrl.searchParams.set('variant', '41035092852888');

// 方式1：替换当前历史记录，不会留下多余的历史条目，适合变体切换场景
window.history.replaceState({}, '', targetUrl);

// 方式2：新增一条历史记录，用户点击后退可回到上一个变体地址
// window.history.pushState({}, '', targetUrl);

2. 监听URL查询参数变更的方案 #

根据你的开发场景可选择以下三种方案：

方案1：自定义事件触发（可控修改URL逻辑时使用） #

如果你自己实现URL修改逻辑，在调用replaceState/pushState后手动抛出自定义事件即可：

// 修改URL后抛出事件
window.history.replaceState({}, '', targetUrl);
window.dispatchEvent(new CustomEvent('searchParamsChange', {
  detail: {
    variant: targetUrl.searchParams.get('variant')
  }
}));

// 监听事件执行后续逻辑
window.addEventListener('searchParamsChange', (e) => {
  console.log('当前选中变体ID：', e.detail.variant);
  // 执行变体变更对应的业务逻辑
});

方案2：劫持History API（不可控修改URL逻辑时使用） #

如果是Shopify二次开发场景，你无法修改原生变体切换的URL修改逻辑，可以重写History API方法，让其调用时自动触发事件：

// 劫持replaceState方法
const rawReplaceState = window.history.replaceState;
window.history.replaceState = function(...args) {
  rawReplaceState.apply(this, args);
  window.dispatchEvent(new CustomEvent('historyUpdate'));
};

// 如需监听pushState可按相同逻辑劫持
const rawPushState = window.history.pushState;
window.history.pushState = function(...args) {
  rawPushState.apply(this, args);
  window.dispatchEvent(new CustomEvent('historyUpdate'));
};

// 同时监听自定义事件和popstate覆盖所有URL变更场景
const handleVariantUpdate = () => {
  const currentVariant = new URL(window.location).searchParams.get('variant');
  console.log('当前变体ID：', currentVariant);
};
window.addEventListener('historyUpdate', handleVariantUpdate);
window.addEventListener('popstate', handleVariantUpdate);

方案3：直接监听变体选择器变更（Shopify场景推荐） #

Shopify的URL变更是跟随变体下拉框的选择触发的，直接监听选择器的change事件更简单稳定：

// 适配大部分Shopify主题的变体选择器，可根据实际页面结构调整选择器
document.querySelector('select[name="id"], [data-variant-option]')?.addEventListener('change', (e) => {
  const selectedVariant = e.target.value;
  console.log('选中的变体ID：', selectedVariant);
});

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