【APP开发】html5之history对象 控制浏览器前进或后退事件

摘要:【APP开发】html5之history对象 控制浏览器前进或后退事件

一、摘要:

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

二、总结:

实现效果:

实现代码:

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

js关键代码:

a)历史记录 前进和后退的方法:

1.后退方法:

2.前进方法:

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

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

4.popstate事件(监听浏览器的点击事件):

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

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

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

window.onpopstate=function(e) {

closewindow;

}

官方解释如下:

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

总结:

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

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

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

本文来自一点资讯

【声明】本文图文均转载自网络,如有侵权,请及时告知我们,我们将在最短的时间内删除。