原生h5 怎么监听用户 在浏览器中 触发的返回事件，全面屏手机 侧滑退出的情况，不退出浏览器，重新回到当前页面_h5浏览器侧滑监听-程序员宅基地
技术标签： 前端 javascript
因为公司手机端 有点击图片放大 预览的轮播图效果,产品提来的一个需求 ，最近曲面屏手机，用户的行为不想点击 叉号了，想左滑 或者右滑动 退出一个图片预览
刚听到这个消息的时候， 首先想到不太可能， 我就问产品在哪里看到的这个效果 退出是人家手机系统的功能呢 我怎么去监控呢
然后产品 就给我发了下 一个视频 （我是用谷歌模拟的,用户返回的）
额 我就没话说了 我说 让我试试看吧
这个时候 我就没法反驳了 首先问了问安卓和苹果的童鞋 我们的h5是做不到， 直接监听人家的返回行为那是显然不行的
那这样就没办法实现了吗， 这个时候 看到了一个vue的项目 让我想起来了 Html5的一个 新东西 就是 history.pushState 和 history.replaceState
通过这个两个玩意 可以改变地址栏的链接 而且 不会重载页面和发起请求 好像可以实现我的需求
既然想法来了 那就去 验证下
但在实现之前 又想到了一个新的问题 我怎么去监听 那个状态的改变呢
这个 我有查找了 其实是有这个方法的 就是 window.onpopstate 监听浏览器的 历史记录状态的变化
那这下 所有的问题就解决了
<button id="push">往历史栈中推入一个记录</button>
<button id="replace">替换当前记录</button>
<script>
$('#push').click(function() {
window.history.pushState(null, null, location.href);
})
$('#replace').click(function () {
window.history.replaceState(null, null, location.href + "/app.html");
})
$(window).on('popstate', function () {
console.log('返回了上一级页面')
});
</script>确实实现了 我想要的那种效果了 用户虽然按了返回按钮 但是 却还是在当前页面 因为页面并没有加载和刷新 这个就是 pushState的 作用
我们看下实际的效果哈
是不是很神奇呢 这个时候 用vue的童鞋 就得想起来一个面试题了 vue的路由是怎么实现的 以及 hash 和 history 模式的 区别
关注我 持续更新前端知识
智能推荐
利用Docker建立服务器和docker容器的监视系统-程序员宅基地
文章浏览阅读112次。为什么80%的码农都做不了架构师？>>> ...
Linux进程间通信——有名管道 FIFO 详解_有名管道的fifo怎么理解-程序员宅基地
文章浏览阅读788次，点赞3次，收藏2次。详细介绍了FIFO相关的关键概念、FIFO的创建、FIFO的打开规则、FIFO的读写规则，并对打开规则及读写规则进行了实例程序验证。_有名管道的fifo怎么理解
MyBatis中resultType和resultMap的区别-程序员宅基地
文章浏览阅读664次，点赞2次，收藏15次。[size=medium][align=left]MyBatis中关于resultType和resultMap的区别共同：MyBatis中在查询进行select映射的时候，返回类型为resultType、resultMap区别：1.resultType是直接表示返回类型的(对应着我们的model对象中的实体)2.resultMap则是对外部ResultMap的引用(提前定义..._mabaits resulttype实体类中5个字段
lol战绩查询接口_如何在LOL中正确的抓出内鬼-程序员宅基地
文章浏览阅读6.1k次。原本假期计划是打两个星期游戏再随便折腾点好玩的.但可惜,假期余额不断充值到账,游戏也给我打腻了.于是顺着游戏里小伙伴的撕逼开始了抓内鬼之旅,让?来看看到底是谁让我上不了王者:D.爬数据最初打算是使用wegame的查询召唤师接口,但是没找到web端且只记录半年的数据,不方便抓包(懒得用wireshark分析).然后去翻翻有没有现成的轮子,看到掌盟上已经有人做过类似的工作,还真有.https..._lol战绩接口
platform基础介绍_platform详解-程序员宅基地
文章浏览阅读4.2k次，点赞5次，收藏23次。（1）什么是platformpaltform是一种虚拟的总线，用于管理外设资源内存资源中断资源。在硬件上有USB-BUS总线，PCI-BUS总线，这是在物理设备上实际存在的总线。USB-BUS管理USB设备，PCI总线管理PCI设备。但是在实际中，一些设备不属于这些总线，一些SOC上面的控制器或者设备。使用platform统一管理这些设备。platform的一个优点就是将驱..._platform详解
【计算机算法】回溯——子集和问题、旅行商问题_旅行商问题测试数据-程序员宅基地
文章浏览阅读319次。求集合中满足一个值的子集和测试数据：43113 24 11 7结果：{13,11,7}{24,7}#include<iostream>using namespace std;int *x,*y;int size,sum;void output(){ int count = 0;//计算子集中的个数，这个只是用来控制是否输出逗号的情况 int tempsum = 0; for(int i = 1;i <= size;i++){ if(y[i] !_旅行商问题测试数据
随便推点
数据链路层简介-程序员宅基地
文章浏览阅读7.2k次，点赞12次，收藏32次。数据链路的基本概念、主要功能_数据链路层
程序员人生：技术人员的职业发展规划_程序员个人发展目标-程序员宅基地
文章浏览阅读1.1k次。以下内容转载自https://blog.csdn.net/universsky2015/article/details/108846699技术人员的职业发展规划思考之前有一篇美团公众号的文章《工作中如何做好技术积累》。近期也在给团队同学做年度绩效沟通，在沟通的时候大家也探讨了职业发展规划。有些同学表示，希望后续能进一步在技术领域（或管理方向）进一步积累；有的同学也表示，希望在新的一年，能具有更好的技术影响力，自己能做一些技术决定，去影响其他人，这样自己会很有成就感。不过，我也挑战问了一些问题：._程序员个人发展目标
pymysql体温管理项目_spark 每天测量一次体温,数据库判断-程序员宅基地
文章浏览阅读501次。体温管理项目目标1.根据页面设计系统功能。2.设计项目数据库。3.代码实现。项目介绍登记学生每天提问信息，发现并记录异常情况！1.首页： 生成每个学生的当天体温名单，按照日期查询当天体温情况2.体温状态修改页面：实现修改某人的体温状态（1:正常，2.体温异常，3.未登记）3.异常信息登记页面：根据名字修改各种信息4.某天体温记录统计：要求：完成统计功能统计：体温正常的有多少人，异常的有多少人！扩展：统计本周/7天内/某个时间段内：某人异常体温次数。项目功_spark 每天测量一次体温,数据库判断
SpringCloud-SpringBoot读取Nacos上的配置文件_springboot读取nacos配置-程序员宅基地
文章浏览阅读2.2k次，点赞22次，收藏8次。在 Spring Boot 应用程序中，可以使用 Spring Cloud Nacos 来实现从 Nacos 服务注册中心和配置中心读取配置信息。 注解时，需要确保属性名与配置文件中的键名一致，Spring Boot 会自动根据前缀匹配来绑定配置项。 注解中的 value 值指定了要绑定的配置文件的前缀，可以直接读取到该配置文件中的相关属性值。如果想要在配置发生变化时动态刷新配置，可以在需要动态更新的 Bean 类上添加。 来触发配置的刷新，以便及时获取最新的配置信息。，并添加相应的键值对。_springboot读取nacos配置
三年级教师计算机教学计划,三年级信息技术教学计划-程序员宅基地
文章浏览阅读110次。2018---2019学年度第一学期三年级信息技术教学计划一、学生分析经过三年级上学期的信息知识的学习，学生们积累了初步的经验。这个阶段的学生都是接触电脑课不久，电的操作还不是很熟练。但是学生对电脑课的兴趣比较浓，热情比较高。所以，老师要抓住这点优势，发扬上个学期总结的一些比较好的经验，把精力放在提高自己的教学方法和教学技巧上让学生学得开心，寓教于乐。二、教材分析本册从内容上来分可分为三单元。第1..._三年级计算机教学计划
kubernetes_kubet-程序员宅基地
文章浏览阅读620次。Kubernetes是自动化容器操作的开源平台，这些操作包括部署、调度和节点集群间扩展Borg是谷歌内部使用的大规模集群管理系统，基于容器技术，目的是实现资源管理的自动化，以及跨多个数据中心的资源利用率的最大化。Kubernetes是Google Omega的开源版本背景kubelet 是 Kubernetes 项目用来操作 Docker 等容器运行时的核心组件，除了跟容器运行时打交道外，kubelet 在配置容器网络、管理容器数据卷时，都需要直接操作宿主机。_kubet