javascript - 检测查询字符串中的URL更改

我在Shopify产品页面上添加了一些脚本，在该页面上，我需要检测在选择产品选项（由Shopify处理）以进行进一步使用时发生的URL更改。

使用以下查询参数（问号）选择变体时，URL发生更改：

Variant 1 - my.shopify.domain/products/product1?variant=1234
Variant 2 - my.shopify.domain/products/product1?variant=5678

我曾尝试添加“ hashchange”事件，但后来意识到它仅适用于“＃”，这里不是这种情况。

我该怎么办？

最佳答案

请将此脚本粘贴到product.liquid文件中

<script>
  var firstTimeUrl = document.URL;
  document.addEventListener('change', function() {
  var currentPageUrl = document.URL;
  var url = new URL(currentPageUrl);
  var isVariantUrl = url.searchParams.get("variant");
  currentPageUrl = isVariantUrl ? currentPageUrl :isVariantUrl;
    if(currentPageUrl && firstTimeUrl != currentPageUrl) {
      firstTimeUrl = currentPageUrl;
      console.log('variant_id: '+isVariantUrl+'')
    }
  });
</script>