利用popstate事件和window下的history对象处理浏览器跳转问题
引子
之前,偶尔在项目中用过history接口做返回上一页功能,当时是用的history.go(-1),前几天面试中遇到一个控制浏览器跳转的问题时有点懵,特意查了文档记录一下,并且列出一些目前能想到的应用:
popstate事件
文档地址
当活动历史记录条目更改时,将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。
就我目前的认识来看,无论是浏览器的前进还是后退都会触发这个popstate事件,所以只能起到一个监听页面变化的作用。
History 接口
- 属性
- History.length 表示历史会话中元素的数目
- History.scrollRestoration 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的(auto)或者手动的(manual)。
- History.state 返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate 事件而查看状态而的方式。
- 方法
History.back()
等同于history.go(-1)
History.forward()
等同于historygo(1)
History.go()
这个方法中如果参数超出范围或者不对就不会起效果
History.pushState()
pushState() 带有三个参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址。下面将对这三个参数进行细致的检查
function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#xx"); }
其他方法就不一一列举了,感兴趣的看文档
监听浏览器返回按钮
function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#xx"); } pushHistory(); window.addEventListener("popstate", function(e) { console.log(e);alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false);
这个地方就监听了浏览器的返回事件,但我有个疑问,如果不先pushState一个地址就监听不到,直接跳转了,这个暂时没搞懂,有知道的小伙伴可以留言讨论一下。
禁止返回上一页的一种方案
history.pushState(null, null, document.URL); window.addEventListener("popstate",function(e) { console.log(e);history.pushState(null, null, document.URL); }, false);
这个其实就是利用pushState向浏览历史列表中插入当前页面,在点击后退前和点击时都插入一次,那样无论点前进还是后退永远都会留在这个页面了
如果大家还有什么关于利用history接口和popstate结合控制页面跳转的实际应用案例,欢迎留言讨论交流!
转载于:https://www.cnblogs.com/wancheng7/p/8542544.html
利用popstate事件和window下的history对象处理浏览器跳转问题相关推荐
- 深入学习 History 对象管理浏览器会话历史
History对象允许我们操作浏览器会话历史,即加载当前页面的标签页窗口或frame窗口的访问历史.之前有同学咨询我如何实现拦截用户跳转页面并强制用户返回首页后重新请求页面,于是有了本篇博客的主题,本 ...
- BOM函数之history对象
前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...
- window.location对象、window.navigator对象、window.history对象
location 对象是 window 对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL.因为这个属性返回的是一个对象,所以我们将这个属性也称为locatio ...
- js中history对象
在 JavaScript 中,history 对象表示浏览器窗口的历史记录,允许你在用户在浏览器中访问过的 URL 之间进行前进和后退的导航.history 对象是 Window 对象的属性,所以在浏 ...
- JavaScript 的自定义对象 、内置对象、 浏览器对象(window对象以及子对象)、Dom对象
JS 中的 Object从本质上看,Object 是一个构造函数,用于创建对象. console.dir(Object); //ƒ Object() var obj = new Object(1); ...
- JavaScript History对象
2019独角兽企业重金招聘Python工程师标准>>> window.history 对象包含浏览器的历史. 浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面.JavaS ...
- HTML5历史状态管理history API-pushState/replaceState与popstate事件
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و [本文源址:http://blog.csdn.net/q1056843325/article/details/60607402 ...
- binlog是什么?能做什么?Window下怎么开启binlog?怎么查看binlog日志?利用binlog日志恢复数据
binlog是什么?能做什么?Window下怎么开启binlog?怎么查看binlog日志?利用binlog日志恢复数据 windows如何开启Binlog日志 文档来源 ##1.什么是Binlog日 ...
- h5 的 pushState, replaceState 和 popstate 事件
我们可以使用location.hash来模拟ajax的前进后退功能.但是使用location.hash存在下面几个问题: 1.使用location.hash会导致地址栏的url发生变化,用户体验不够友 ...
最新文章
- WCF系列(三) -- WCF配置文件注释 【转】
- 判断字符串数组中是否所有字符只出现了一次
- python樱花代码_使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
- 【APICloud系列|31】百度导航功能的实现
- fprintf/fscanf函数分析
- 最大连续和问题【四种不同的算法】
- js字符串拼接中关于单引号和双引号的那些事
- MediaWiki/升级
- Android 11 系统字体加载流程
- vue中安装axios
- Windows-Server-2012-如何实现多个用户远程桌面登陆
- Linux的基础操作
- 在苹果Macbook Pro上安装Windows 7
- 5G+工业互联网发展探讨
- Qt Jambi 4.8 快速入门
- 微信小程序学习(实战)
- 线段树进阶(懒惰标记)
- vim 安装插件及常用插件
- 华为鸿蒙认证测试题,你能答对几道?
- WmiPrvSE.exe内存占用异常
热门文章
- python-copy模块使用
- 2(3).选择排序_快排(线性表)
- 告别2010,迎来2011
- 【LintCode: 3. 统计数字】算法题解析
- 【VMware虚拟化解决方案】配置和部署VMware ESXi5.5
- 2017 计蒜之道 初赛 第五场 B. UCloud 的安全秘钥(简单)
- Swift互用性:采用Cocoa设计模式(Swift 2.0版)-b
- 你不需要jQuery(四)
- 程序员必须知道的几个Git代码托管平台(转)
- Ubuntu12.04版本安装arm-linux-gcc 4.3.3