window.onpopstate是用来监听浏览器的回退前进事件。

与window.onpopstate相关的H5新方法：

  1. history.pushState(state,null,url) 历史记录中添加一个状态

    1
    2
    3
    4
    history.pushState({
    	page : 'index',
    	id : 1
    },null,'index.html');

  2. history.replaceState(state,null,url) 替换一条历史记录

    1
    2
    3
    history.replaceState({
    	page : 'index'
    },null,'index.html')

在onpopstate事件中，会调取到pushState和replaceState方法中state对象，比如：

1
2
3
window.onpopstate = function(e){
	alert(e.state.page);
}

栗子：给当前页面添加一个历史记录（可跨域）
now.html当前访问的页面添加onpopstate事件

1
2
3
4
5
window.onpopstate = function(e){
	location.reload();// 回退页面刷新
}
history.replaceState({page : 'other'},null,'other.html');//替换历史状态
history.pushState({page : 'now'},null,'now.html');//创建历史状态

other.html跳转页面重定向，实现跨域

1
location.href = 'index.html';//可以跨域