Una

接下来的日子,陆续把未总结的问题补充起来......

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

一、摘要:

总结用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事件

(如有不对,望指正~)

posted on 2016-07-17 22:37  youyi2016  阅读(7844)  评论(0编辑  收藏  举报