html5之history对象 控制浏览器前进或后退事件

一、摘要：

总结用history对象操作浏览器的历史记录的方法，在项目中使用的是mui框架，总结中包括我在实际项目中遇到的问题。

二、总结：

实现效果：

实现代码：

上面的编辑页面加载的时候就要先调用一次pushHistory()方法，如果不先调用一遍，在第一次点击浏览器上的返回按钮时，不会弹出提示框，必须在你按过一次手机页面上的返回键之后，你点击了提示框上的取消按钮，你再按浏览器上的返回键页面才能弹出提示框。

js关键代码：

 下面总结history对象的用法：

a）历史记录 前进和后退的方法：

1.后退方法：

2.前进方法：

3.移动到指定的历史记录点：

查看浏览器中一共有多少页：

4.popstate事件（监听浏览器的点击事件）：

每当激活的历史记录发生变化时，都会触发popstate事件。

即每当点击浏览器的前进或是后退的时候都会触发popstate事件，如下代码：

上面的代码可以不加定时器，根据实际情况而定，上面的代码等同于：

window.onpopstate=function(e) {

closewindow();

}

官方解释如下：

5.pushState（）方法主要是添加历史记录条目，replaceState是修改历史记录条目

总结：

解释上面的那个问题，在页面初次加载编辑页面的时候就要调用pushHistory（）方法（主要是调用pushState（）），主要是用来改变浏览器的历史记录条目，

当加载编辑页面的时候（如下），因为调用了pushHistory（）方法，所以浏览器的地址会改变，地址后面会加上我们在pushState中添加的参数"#",加"#",显示的页面仍然是当前的编辑页面，当用户按了浏览器的返回键，页面返回到加"#"号之前的那个页面，也就是下图的这个地址的页面，仍然是当前的编辑页面，这时因为当前的编辑页面的历史页面发生变化，所以会触发popstate事件，从而就会调用我们写的closewindow（）方法弹出提示框了。

同理，如果起初没有调用pushHistory（）方法，即没有添加历史记录条目，第一次进入编辑页面然后就按浏览器的返回键，这时就会直接返回列表页面（项目中是从列表页面进入编辑页面），因为当前编辑页面没有历史记录条目发生变化（提示框的显示是在编辑页面），所以不会触发popstate事件，进而也不会有提示框弹出。

参考资料：https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history#popstate事件

（如有不对，望指正~）