原生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 模式的区别

关注我持续更新前端知识

本文链接：https://blog.csdn.net/yunchong_zhao/article/details/113739596

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

第三十六篇、基于Arduino uno，获取红外寻迹传感器的原始值——结果导向_怎么检测红外寻迹模块返回值-程序员宅基地

文章浏览阅读385次。基于Arduino uno，获取红外寻迹传感器的原始值_怎么检测红外寻迹模块返回值

基于单片机的无线投票显示系统设计-程序员宅基地

文章浏览阅读494次，点赞5次，收藏9次。单片机（Microcontroller）是一种集成了微处理器核心、存储器、输入/输出接口和定时器等功能模块的集成电路芯片，具有体积小、功耗低、性价比高等特点，被广泛应用于各个领域。单片机的发展历史可以追溯到20世纪70年代，当时的单片机功能有限，主要用于简单的控制任务。

生成对抗网络GAN_生成对抗网络 python代码-程序员宅基地

文章浏览阅读412次。https://zhuanlan.zhihu.com/p/54096381_生成对抗网络 python代码

html——网页上添加表格_怎样在网站中添加表格别人可以下载-程序员宅基地

文章浏览阅读5.2k次，点赞7次，收藏18次。有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：想在网页上展示上述表格效果可以使用以下代码：创建表格的四个元素：table、tbody、tr、th、td1、…：整个表格以标记开始、标记结束。2、…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。3、…_怎样在网站中添加表格别人可以下载

《Qt MOOC系列教程》第五章第三节：创建新的QML类型_qmlregisteruncreatabletype-程序员宅基地

文章浏览阅读770次。到目前为止，我们已经讨论了如何将对象实例公开给QML上下文。有时我们还希望在QML中可以使用注册类本身。注册允许将类当作QML中的数据类型来使用。此外，注册还可以提供其他功能，比如允许在QML中将类用作可实例化的QML对象类型，或者允许在QML中导入和使用类的单例实例。通常我们使用Q_OBJECT宏注册从QObject派生的类，也可以用Q_GADGET宏声明一个比QObject“更轻”的版本。在这些更轻的类中，我们可以访问它们的属性、枚举和可调用的方法，但不能使用信号槽系统，我们稍后会进行介绍。1. 注_qmlregisteruncreatabletype

头文件与命名空间的关系_c#中命名空间和c语言中头文件之间的关系-程序员宅基地

文章浏览阅读2.1k次，点赞7次，收藏15次。头文件与命名空间的关系 Q:有些书说有些头文件不在std里是什么意思？std里包含些什么？为什么不用std就不能使用cout？头文件中声明的东西为什么在使用的时候需要先using namespace std；一下？如果我不用＃include和其他头文件。只用using namespace std 的话，是不能用cout的。这说明cout是在iostream里声明_c#中命名空间和c语言中头文件之间的关系