javascript - 检查 javascript 中的 URL 是否已更改(不能使用 hashChanged)

Question

我浏览了很多问题，但找不到适合我的环境的解决方案。这是在 Shopify 中完成的，我有一个有变体的产品。当变体更改时，URL 会附加一个产品 ID，该 ID 会动态更改产品价格(无需重新加载)。

我有一个额外的 strip 检测何时发生这种变化，这样我就可以做一些额外的东西，目前，它确实检测到它，但我所采取的路线似乎浪费了电力。

$(document).ready(function() {
    setInterval(function() {
      checkURLchange(window.location.href);
    }, 10);

它每 10 毫秒发生一次，因此对于用户来说，更改似乎是即时的(假设我在页面上附加了一张新图片或有关变体更改的内容)。

如果我可以保存 URL 的状态并检查它是否已更改，那会更有效，但我又不知道如何处理此问题。

窗口的典型 hashChanged 事件在这种情况下不起作用，因为 url 更改不使用哈希 (Shopify)，而是看起来像这样:

?variant=99390743207991

或

?variant=13390743202341

popstate(历史更改)怎么样？

不幸的是，这似乎也不起作用。正如 popstate 或建议的答案 here 。

请随意查看在我困惑的暂存环境中测试的解决方案:https://ti560ye2q51lxyvj-11502512.shopifypreview.com/products/the-wg-m1-grill-kit

Answer 1

监听window中的popstate。

window.addEventListener('popstate', () => {
    /* do something */
})

您可以通过向其添加控制台日志并使用 window.location.hash = 'somehash' 更改哈希来对此进行测试。