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事件
(如有不对,望指正~)
html5之history对象 控制浏览器前进或后退事件的更多相关文章
- Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录
根据网上参考自己做个笔记:参考网址:http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5为histor ...
- 利用popstate事件和window下的history对象处理浏览器跳转问题
引子 之前,偶尔在项目中用过history接口做返回上一页功能,当时是用的history.go(-1),前几天面试中遇到一个控制浏览器跳转的问题时有点懵,特意查了文档记录一下,并且列出一些目前能想到的 ...
- html5之history对象理解
history对象之pushState,replaceState浏览器有一个history对象,用来保存浏览历史,用户可以通过点击浏览器的后退或前进按钮在历史记录中切换.之前对history的操作的A ...
- 深入学习 History 对象管理浏览器会话历史
History对象允许我们操作浏览器会话历史,即加载当前页面的标签页窗口或frame窗口的访问历史.之前有同学咨询我如何实现拦截用户跳转页面并强制用户返回首页后重新请求页面,于是有了本篇博客的主题,本 ...
- 使用JavaScript的history对象来实现页面前进后退(go/back/forward)。
我们都知道JavaScript有history对象,主要是用来记录浏览器窗口的浏览记录.但是,JS脚本是不允许访问到这个记录里面的内容(隐私). 常见的用法是: history.back();//返回 ...
- 浅谈history对象以及路由插件原理
简介 History对象最初设计用来表示窗口的浏览历史,但是,出于隐私方面的原因,History对象不再允许脚本访问已经访问过的实际URL.虽然,我们不清楚历史URL,但是,我们可以通过History ...
- BOM之history对象
前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...
- BOM之history对象(转)
前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...
- js history对象 手机物理返回键
有兴趣的可以了解下history对象,不感兴趣也可以直接跳到手机物理返回键监听部分 使用场景: 场景1:项目中一个表单页面,需得填写验证码,填写验证码后提交,由于使用的form直接提交,没有使用AJA ...
随机推荐
- PIC XC8 EEPROM操作
要做一个报警功能的东东,要求可以通过遥控来改变遥控内容.由于对系统的稳定性要求很高,所以用了看门狗. 可是看门狗复位会引起所有寄存器重置,恢复到默认状态.遥控要改变的内容也被复位了,所以只能借助EEP ...
- ASP.NET输出JSON格式数据
找到一个方法,虽然返回的不是json,但是数据格式是可以的 ArrayList eventList = new ArrayList(); ; i < ;i++ ) { Hashtable ht ...
- Git 的深入理解与GitHub托管服务(转)
源代码管理系统(SCM)与版本控制 版本控制是一种记录若干文件内容变化,以便将来查阅特定版本修订情况的系统. 本地版本控制系统 许多人习惯用复制整个项目目录的方式来保存不同的版本,或许还会 ...
- linux命令:gzip
1.命令介绍: gzip用来压缩或解压文件,对文本文件的压缩率有60~70%. 2.命令格式: gzip [选项] 文件/目录 3.命令参数: -a或--ascii 使用ASCII文字模式. -c或 ...
- HDU 1863
http://acm.hdu.edu.cn/showproblem.php?pid=1863 复习考研练练写Prim,第一次写,乱搞的,有点难看 邻接表+堆 #include <iostream ...
- nopi excel 导入
#region 从Excel导入 /// <summary> /// 读取excel ,默认第一行为标头 /// </summary> /// <param name=& ...
- oracle远程连接配置
今日需要对站内所有的空间数据做入库处理,所以在服务器上安装了oracle,在本地需要对其进行连接,在网上查阅了相关资料,整理如下: 远程服务端配置:1. 数据库配置 因为要为外界客户端提供数据服 ...
- 学习maple
定义函数:$f:=(x,y) \rightarrow x^2+y^2$ 类似mathematica的manipulate功能:plots[animate](plot,[f(x,y),x=0..1],y ...
- 麦克斯韦方程组 (Maxwell's equation)的简单解释
[转载请注明出处]http://www.cnblogs.com/mashiqi 2016/12/12 以下会用高中的物理知识和大学微积分的数学知识对麦克斯韦方程组进行一个简单的解释.希望大家都能看得懂 ...
- C++ 类知识点
1. member function definitions are processed after the compiler processes all of the declarations in ...