javascript - 使用 history.pushState() 将两次推送到历史记录后未触发 Popstate 事件

Question

我正在开发一个电子商店，其中的项目在 iframe 中的页面顶部打开。我正在使用

history.pushState(stateObj, "page 2", http://localhost:8888/product-category/tyger/vara-tyger/?view=product&item=test-4);

为了让客户复制当前 url 并使用它转到带有在 iframe 中打开的项目的当前页面。另外，我正在使用

window.addEventListener('popstate', manageHistory);

function manageHistory(event) {
    if (!has_gone_back) {
        var iframeOpen = false;
        has_gone_back = true;
    }
    else {
        var iframeOpen = true;
        has_gone_back = false;
    }
}

为了让客户使用浏览器的后退和前进按钮进行导航(关闭和打开 iframe)。

但是，当打开一个产品(调用一次 history.pushState)时，使用浏览器的后退按钮，然后打开另一个产品(再次调用 history.pushState)，并且再次返回，manageHistory() 没有被调用。客户被带到第一个打开的产品，但如果再次按下，将调用 manageHistory()。

我希望在第二次打开的产品页面上按回键时调用 manageHistory()，以便添加代码以在按回键时将客户重定向到类别的起始页。

我已经尝试为两个打开的产品添加事件监听器，也尝试只为第一个打开的产品添加事件监听器。知道问题可能是什么吗？

Answer 1

来自 https://developer.mozilla.org/en-US/docs/Web/Events/popstate

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by doing a browser action such as a click on the back button (or calling history.back() in JavaScript).

您可以覆盖 popState 和 replaceState，但通常更好的想法是创建一个包装器来设置 url，然后触发您的处理函数。

像这样的……

function urlChangeHandler() {
  var url = window.location.href;

  // Whatever you want to do...
}

// Handle initial url:
urlChangeHandler();

window.addEventListener('popstate', urlChangeHandler);

var urlState = {
  push: function(url) {
    window.history.pushState(null, null, url);
    urlChangeHandler();
  },
  replace: function(url) {
    window.history.replaceState(null, null, url);
    urlChangeHandler();
  }
}

我的一个项目中有一个类似的文件，它根据#hash...更新数据存储

import tree from './state'


// No need for react-router for such a simple application.

function hashChangeHandler(commit) {
  return () => {
    const hash = window.location.hash.substr(1);

    const cursor = tree.select('activeContactIndex');
    const createCursor = tree.select('createNewContact');

    cursor.set(null);
    createCursor.set(false);

    (() => {
      if(!hash.length) {
        // Clean up the url (remove the hash if there is nothing after it):
        window.history.replaceState(null, null, window.location.pathname);
        return;
      }

      if(hash === 'new') {
        createCursor.set(true);
        return;
      }

      const index = parseInt(hash, 10);
      if(!isNaN(index)) {
        cursor.set(index);
      }
    })();
    commit && tree.commit();
  }
}

// Handle initial url:
hashChangeHandler(true)();

// Handle manual changes of the hash in the url:
window.addEventListener('hashchange', hashChangeHandler(true));

function createHash(location) {
  return (location !== null) ? `#${location}` : window.location.pathname;
}

module.exports = {
  push: (location, commit=true) => {
    window.history.pushState(null, null, createHash(location));
    hashChangeHandler(commit)();
  },
  replace: (location, commit=true) => {
    window.history.replaceState(null, null, createHash(location));
    hashChangeHandler(commit)();
  }
}