Question

我有一个简单的代码来测试html5的历史api

只是一些按钮

<button name="hey1" onClick="historytestone();">history test one</button>
<button name="hey2" onClick="historytesttwo();">history test two</button>
<button name="hey3" onClick="historytestthree();">history test three</button>
<button name="hey4" onClick="historytestfour();">history test four</button>
<button name="hey5" onClick="historytestfive();">history test five</button>

和我的js就像

function historytestone(){
    history.pushState({page: "ross"}, "ross","ross.html");
}

function historytesttwo(){
    history.pushState({page: "monica"}, "monica","monica.html");
}

function historytestthree(){
    history.pushState({page: "chandler"}, "chandler","chandler.html");
}

function historytestfour(){
    history.pushState({page: "joy"}, "joy","joy.html");
}

function historytestfive(){
    history.pushState({page: "rachel"}, "rachel","rachel.html?a=1&b=2");
}

// this does not work    
window.addEventListener("popstate", function(event) {
    alert("hello");
});

//nor this works
window.onpopstate=function(event){
  alert("hello");
}

当我尝试侦听popstate事件时，控制台上没有任何警报和错误。没有遇到我使用的语法，我什么都没得到。

抱歉，但我看不出有什么问题。请解释一下。

修改

这是我的问题。这是我的代码here，这是我基于here的演示。

现在，我相信我的代码是演示的简化版本。

我必须点击＆＃34;返回＆＃34;浏览器按钮以触发popstate事件（请参阅警报）。但是演示只需单击名称即可触发popstate事件（更改内容）。

为什么会这样？为什么我必须按下后退按钮而演示没有，即使是相同的代码？再次感谢

Answer 1

基于此处的定义：https://developer.mozilla.org/en-US/docs/Web/Events/popstate

当活动历史记录条目更改时会触发popstate事件。如果   正在激活的历史记录条目是通过调用创建的   history.pushState（）或受到调用的影响   history.replaceState（），popstate事件的state属性包含一个   历史条目的状态对象的副本。

请注意，只需调用history.pushState（）或history.replaceState（）   不会触发popstate事件。仅触发popstate事件   通过执行浏览器操作，例如单击后退按钮（或   在JavaScript中调用history.back（）。

浏览器倾向于在页面加载时以不同方式处理popstate事件。   Chrome和Safari总是在页面加载时发出popstate事件，但是   Firefox没有。

如果您在每次单击链接时看到http://html5doctor.com/demos/history/的源代码，则会调用updateContent函数（也是popstate的事件处理程序），然后调用pushState。

关于历史api的popstate事件不会触发

1 个答案: