在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)操作返回键的更多相关文章

  1. JS监听浏览器的返回、后退、上一页按钮的事件方法

    在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等 ...

  2. vue JS实现监听浏览器返回按键事件

    // 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...

  3. JS实时监听浏览器宽度的变化

    boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...

  4. js监听浏览器tab窗口切换

    js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) {  document.addEventLis ...

  5. vue监听浏览器窗口大小变化

    首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...

  6. JS监听浏览器标签页的显示与隐藏

    /** * 监听浏览器标签页的显示与隐藏 */ class ListenerPageVisibility { constructor () { // 设置隐藏属性和改变可见属性的事件的名称 this. ...

  7. 【hugo】- hugo 监听浏览器切换title

    hugo 博客 监听浏览器title 动态改变浏览器title标题 找到head.html themes/maupassant/layouts/partials/head.html 添加监听js 可以 ...

  8. 监听浏览器tab切换

    监听浏览器切屏 为了完成验证用户在切换浏览器tab时进行登录再次认证需求需要监听浏览器切换窗口 if (document.hidden !== undefined) { document.addEve ...

  9. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  10. 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

随机推荐

  1. 【三】Django模版的使用

    作为Web框架,Django提供了模板,可以很便利的动态生成HTML 模版系统致力于表达外观,而不是程序逻辑 模板的设计实现了业务逻辑(view)与显示内容(template)的分离,一个视图可以使用 ...

  2. python 元类 MetaClass

    type() 动态语言和静态语言最大的不同,就是函数和类的定义,不是编译时定义的,而是运行时动态创建的. 比方说我们要定义一个Hello的class,就写一个hello.py模块: class Hel ...

  3. python内置下载服务器

    python内置了一个下载服务器.例如你的同事要让你传的文件位于某一个目录下面,那么你可以进入这个目录,然后执行下面的命令启动一个下载服务器 python2 python -m SimpleHTTPS ...

  4. ELK-全文检索技术-kibana操作elasticsearch

    前言:建议kibana语法一定要学好! 1       软件安装 1.1     ES的安装 第一步:解压压缩包,放到一个没有中文没有空格的位置 第二步:修改配置文件 1.  jvm.options ...

  5. android中的rn项目更新gradle及补充二

    修改build.gradle的版本,com.android.tools.build:gradle:2.1.0, 改为更高的,然后更改gradle/wrapper/gradle-wrapper.prop ...

  6. 从分析攻击方式来谈如何防御DDoS攻击

    DDoS攻击的定义: DDoS攻击全称——分布式拒绝服务攻击,是网络攻击中非常常见的攻击方式.在进行攻击的时候,这种方式可以对不同地点的大量计算机进行攻击,进行攻击的时候主要是对攻击的目标发送超过其处 ...

  7. nginx的简单介绍

    nginx简单介绍 Nginx的负载均衡策略可以分两大类:内置策略和扩展侧略: 内置策略包括:轮询,加权轮询,IP hash 扩展策略是:url hash ,fair nginx.conf文件结构 1 ...

  8. MapReduce计数程序(自主复习)

    1.MyWordCount类 注意: 1.本机+测试,两个注释都放开 2.本机跑集群,要开异构平台为true 3.集群跑,把两个注释都注起来,然后在集群上面跑 package com.littlepa ...

  9. Codeforces 898 贪心关闭最少闹钟 优先队列最少操作构造N/2squares 讨论情况哈希数字串分割a+b=c

    A /* Huyyt */ #include <bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #define mkp(a,b) ...

  10. 树上独立集数量 树型DP

    题目描述: 对于一棵树,独立集是指两两互不相邻的节点构成的集合.例如,图1有5个不同的独立集(1个双点集合.3个单点集合.1个空集),图2有14个不同的独立集,图3有5536个不同的独立集.  输入: ...