返回到…转载

https://www.cnblogs.com/jefferyE/p/7063018.html

用户访问网页的历史记录通常会被保存在一个类似于栈中即history对象点击返回就出栈跳下一页就入栈。

返回到上一个页面

进行了增强新增了两个Api和一个事件分别是pushState、replaceState

onpopstate

pushState是往history对象里添加一个新的历史记录即压栈。

replaceState

当点击浏览器后退按钮或js调用history.back都会触发onpopstate事件,

onhashchange

但可以被利用来做客户端前进和后退事件的监听onpopstate是专门用来监听浏览器前进后退的,

一、onhashchange

http://www.example.com/test.htm#part2

URL

document.getElementById(demo).innerHTML

window.addEventListener(hashchange,

myFunction);

每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发.

如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的,

则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.

调用history.pushState()或者history.replaceState()不会触发popstate事件.

比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).

当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome

Safari会触发popstate事件,

假如当前网页地址为http://example.com/example.html,则运行下述代码后

window.onpopstate

http://example.com/example.html?page1,条目索引为1

2},

http://example.com/example.html?page2,条目索引为2

3},

http://example.com/example.html?page1,

state:

http://example.com/example.html,

state:

http://example.com/example.html?page3,

state:

即便进入了那些非pushState和replaceState方法作用过的(比如http://example.com/example.html)没有state对象关联的那些网页,

popstate事件也仍然会被触发.