监听浏览器返回键、后退、上一页事件(popstate)操作返回键
在WebApp或浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。
一、简单介绍 history 中的操作
1.window.history.back(),后退
2.window.history.forward(),前进
3.window.history.go(num),前进或后退指定数量历史记录
4.window.history.pushState(state, title, utl),在页面中创建一个 history 实体。直接添加到历史记录中。
参数: state:存储一个对象,可以添加相关信息,可以使用 history.state 读取其中的内容。
title:历史记录的标题。
url:创建的历史记录的链接。进行历史记录操作时会跳转到该链接。
5.window.history.replaceState(),修改当前的 history 实体。
6.popstate 事件,history 实体改变时触发的事件。
7.window.history.state,会获得 history 实体中的 state 对象。
二、使用方法
取消默认的返回操作:
1.添加一条 history 实体作为替代原来的 history 实体
function pushHistory(){
var state = {
title: "title",
url: "#"
}
window.history.pushState(state, "title", "#");
}
pushHistory()
2.监听 popstate 事件
window.addEventListener("popstate", function(){
//doSomething
}, false)
三、注意事项
1.每次返回都会消耗一个 history 实体,若用户选择取消离开,则需要继续 pushState 一个实体
2.pushState 只能一个实体,多个实体返回会出错。使用 window.history.state 查询是否存在添加的实体。
监听浏览器返回键、后退、上一页事件(popstate)操作返回键的更多相关文章
- JS监听浏览器的返回、后退、上一页按钮的事件方法
在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等 ...
- vue JS实现监听浏览器返回按键事件
// 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...
- JS实时监听浏览器宽度的变化
boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...
- js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventLis ...
- vue监听浏览器窗口大小变化
首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...
- JS监听浏览器标签页的显示与隐藏
/** * 监听浏览器标签页的显示与隐藏 */ class ListenerPageVisibility { constructor () { // 设置隐藏属性和改变可见属性的事件的名称 this. ...
- 【hugo】- hugo 监听浏览器切换title
hugo 博客 监听浏览器title 动态改变浏览器title标题 找到head.html themes/maupassant/layouts/partials/head.html 添加监听js 可以 ...
- 监听浏览器tab切换
监听浏览器切屏 为了完成验证用户在切换浏览器tab时进行登录再次认证需求需要监听浏览器切换窗口 if (document.hidden !== undefined) { document.addEve ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数
高并发分布式系统中生成全局唯一(订单号)Id 1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...
随机推荐
- flask中使用jsonify和json.dumps的区别
一.实验 python的flask框架为用户提供了直接返回包含json格式数据响应的方法,即jsonify,在开发中会经常用到.如下一段简单的flask后端代码,服务端视图函数根据请求参数返回json ...
- 2017年0406------如何使用sessionStroage来储存参数是对象的,以及localStorage和sessionStorage的不同地方
由于项目需要,需要向另外个页面传参数,,由于参数比较特殊,是对象,所以需要用到sessionStorage方法,下面简单的总结一下方法: (1)这个是要将对象转换成字符串,再存储到storage中, ...
- linux:RAID(磁盘阵列)笔记
RAID磁盘阵列简述: RAID0(条带): 把多个同样大小的磁盘串联起来当做一个磁盘来用. 优点:读写速度快. 缺点:数据容易丢失(没有容错能力). ...
- Tensorflow API 学习(1)-tf.slice()
slice()函数原型为: tf.slice(input_, begin, size, name=None) 函数有4个参数: 1,input_ :图片的矩阵输入格式. 2,begin :开始截取的位 ...
- log4net日志输出配置即输出到文件又输出到visual studio的output窗口
<configuration> <configSections> <section name="log4net" type="log4net ...
- tomcat部署项目时 报错Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web modules
Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web modules 解决方法: 找到文件 .set ...
- 【AST篇】教你如何编写 Eslint 插件
前言 虽然现在已经有很多实用的 ESLint 插件了,但随着项目不断迭代发展,你可能会遇到已有 ESLint 插件不能满足现在团队开发的情况.这时候,你需要自己来创建一个 ESLint 插件. 本文我 ...
- vue学习之vue-resource的引入
npm安装的命令 npm install vue-resource --save 安装完成后在main.js中导入 import VueResource from 'vue-resource' V ...
- tf.get_variable函数的使用
tf.get_variable(name, shape, initializer): name就是变量的名称,shape是变量的维度,initializer是变量初始化的方式,初始化的方式有以下几种 ...
- laravel的model
1.创建模型 $ php artisan make:model Models/Issue 2.模型的白名单机制,用于赋值 class Issue extends Model { //指定表名 pr ...