popstate事件处理程序似乎无法工作

Question

我在使用'popstate'事件处理程序时遇到了问题，这是我的代码：

window.addEventListener("popstate", function (event){
    if (event.state) {
        alert('abc')
    }
});

// The data object is arbitrary and is passed with the popstate event.
var dataObject = {
    createdAt: '2011-10-10',
    author: 'donnamoss'
};

var url = '/posts/new-url';
history.pushState(dataObject, document.title, url);

我原本期望这段代码在执行时会弹出一个警示框，但实际上什么也没发生。

这里有什么问题吗？

谢谢。

- Khanh Tran

---

在jsFiddle中测试代码时，.pushState()事件似乎失败了。用字符串替换变量可以让我触发该事件。 - SeinopSys

@DJDavid98 - 这只意味着 pushState 返回 false 或 undefined。 - Derek 朕會功夫

Answer 1

pushState无法触发popstate事件，只有通过点击浏览器的后退/前进按钮（或使用退格键）或调用history.back() / history.go(n)才能触发此事件。

此外，在Webkit浏览器中，popstate事件会在页面的onload事件之后触发，但Firefox和IE没有这种行为。

- otakustay

---

之前提到的popstate事件在页面加载或调用history.pushState()时触发。在后一种情况下，事件对象将包含一个状态属性，该属性保存了传递给history.pushState()的数据对象。请问您能否确认一下，这是我从《JavaScript Web应用程序》中引用的内容？ - Khanh Tran

我阅读了HTML标准，并没有找到任何触发popstate事件的步骤。昨天我在做一个与历史记录API相关的主题，我确定pushState不会触发任何popstate事件。如果一个push操作触发了一个pop事件，这不是很奇怪吗？如果一个push触发了一个pop，那么历史堆栈中还剩下什么？什么都没有了吗？ - otakustay

现在我从朋友那里借了一本JavaScript Web应用程序的书，它说pushState()会触发popstate事件，但我认为这是这本书的错误，因为网络上没有其他资源证实这种行为。 - otakustay

非常感谢otakustay，虽然Derek回复很快，但我最终选择了你的答案，因为你对回答我的问题充满热情。谢谢。 - Khanh Tran

对于从History.js迁移的用户来说，这可能会很奇怪（你还记得吗！），因为statechange事件总是被触发... - benzkji

Answer 2

不会的。

根据MDN文档所述：

请注意，仅调用history.pushState()或history.replaceState()不会触发popstate事件。只有通过浏览器动作（如单击“返回”按钮（或在JavaScript中调用history.back()））才会触发popstate事件。

同样，根据这个问题，当您调用pushState()时，在Chrome中不会触发popstate事件。

- Arun P Johny

Answer 3

history.pushState()根据定义不会触发popstate事件。

当导航到会话历史记录条目时，将在某些情况下触发popstate事件。

此事件仅在导航到历史记录条目时才会触发，无论是通过按下后退/前进按钮还是使用history.go/back。

- Derek 朕會功夫