监听移动应用程序的返回键——了解H5新特性

最新推荐文章于 2023-10-25 10:47:50 发布

PmtxPhp

最新推荐文章于 2023-10-25 10:47:50 发布

阅读量254

点赞数

文章标签： H5

本文链接：https://blog.csdn.net/PmtxPhp/article/details/133750795

版权

H5 专栏收录该内容

103 篇文章 2 订阅 ¥59.90 ¥99.00

订阅专栏

本文介绍了如何在H5中利用新特性监听移动应用的返回键事件。通过使用事件或History对象的事件监听器，开发者可以在用户按下返回键时执行特定操作，增强用户体验。示例代码展示了如何实现这一功能。

摘要由CSDN通过智能技术生成

在移动应用程序的开发中，我们经常需要监听用户按下返回键的事件，以便在用户按下返回键时执行一些特定的操作。在H5（HTML5）中，我们可以利用新特性来实现这一功能。本文将介绍如何使用H5的新特性来监听移动应用程序自带的返回键，并提供相应的源代码示例。

在H5中，我们可以使用window.onpopstate事件来监听返回键的按下事件。window.onpopstate事件会在浏览器的历史记录发生改变时触发，而按下返回键会导致浏览器的历史记录发生改变。

下面是一个示例代码，演示如何使用window.onpopstate事件来监听返回键的按下事件：

window.onpopstate = function(event)

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

PmtxPhp

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

移动端h5监听浏览器返回操作（目前在react项目中用到）

weixin_34117211的博客

07-31

6079

前言1.主要是返回是默认的浏览器返回事件是返回上一个页面。2.处理页面各种弹窗，点击物理返回应该隐藏这些弹窗而不是直接返回页面。3.总结下问题，h5应该希望能监听到返回事件并且做一些处理。相关知识1、利用popstate事件，点击浏览器前进，后退会触发popstate事件。2、利用hashchange事件，页面hash改变是会触发此事件（适合react，vue单页面应用）。一、window.onp...

H5新特性

一片涟漪

08-30

375

H5新特性 html5:万维网的核心语言、HTML规范的第五次重大修改。HTML5是HTML标准的下一个版本 HTML5简化了很多细微的语法，例如doctype的声明： HTML4的声明： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML5的声明： <!DOCTYPE html> h5新增了10大特性：语

参与评论您还未登录，请先登录后发表或查看评论

uniapp开发h5 监听用户物理返回键类似拼多多返回后弹窗

最新发布

柑橘乌云_

10-25

1954

在当前vue页面(A页面)加载时往浏览器历史里备份一份当前的url地址(B页面)，此时用户点击返回，就会从B页面跳到A页面，由于这两个页面地址一致，就会产生点击回退却没有效果的错觉。h5既然监听不到物理返回键，那么用户点击了物理返回键自然会路由返回上一页，那么我们监听路由，由于路由是uni自己封装的，我测试的项目是hash路由，所以我监听了onhashchange事件，然后由于。如果想禁用一个页面的返回操作，只需要在这个页面的历史记录中写入大量的历史。详情页：/pages/detail/detail。

H5 监听手机返回事件

youngjqz的博客

11-26

3815

1.使用popstate监听返回事件 //在mounted 里面挂载 popstate 事件 mounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, '#1'); window.addEventLis...

uniappH5中监听手机自带物理返回键

candyy5的博客

07-14

1631

【代码】uniappH5中点击手机自带物理返回键出现提示框。

页面返回刷新或H5监听(手机的)返回键

weixin_33979363的博客

11-05

1824

1. pushHistory(); window.addEventListener("popstate", function(e) { alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false); function pushHistory() { var state = { title: "...

小程序系列——始

小狼驿站

11-30

2103

第一个问题：什么是小程序从关注的角度不同，可能理解得出的结论也不尽相同。例如：作为一个产品经理，可能更关注小程序的亮点，基于此亮点我们能做出什么有受众群体的微app。比如，小程序是以微信这个超级 app 为宿主的，微信本身的使用群体与便捷性可能会导致小程序的使用场景最好是挥之即来，用完即去的情况，等等。但是，从开发的角度来看，我们可能更关心的是技术实现。更关注我们用这套框架，可使用的能力有哪些，存

微信小程序从入门到精通（二）小程序的能力

小灯光环

01-24

9162

前言上一篇blog介绍了小程序的一些基础概念和代码构成以及主要的几个文件类型（微信小程序从入门到精通（一）基础知识与代码构成），那么本篇blog就继续围绕官方的简易教程以及QuickStart项目来继续研究一下小程序如何工作。小程序能力上次我们具体了解小程序的代码构成以及四个重要的文件类型（wxml、wxss、js和app.json），那么接下来就看看小程序的整体工作运行流程，

2021-6月面试总结-vue，uniapp，小程序，h5，更新中

m0_67266787的博客

02-24

764

**一、**vue 2.6.11 vue****页面的生命周期？总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre

详解Html5 监听拦截Android返回键方法

09-27

主要介绍了详解Html5 监听拦截Android返回键方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

混合开发中，H5页面如何监听Android手机返回键

热门推荐

Fantasy

07-15

1万+

1. 前言混合开发中，如果当前操作的页面是H5写的。那么这个时候点击Android手机返回键，默认是返回到上一个页面，跟浏览器的回退功能是一样的，都是返回到历史记录中的前一个记录。看着好像没啥问题，但是当H5页面当前有一个弹窗，按照正常的交互，这会儿点击手机返回键，应该是关闭弹窗的，但是实际上却不是这样子，不仅仅关闭了弹窗，而且返回到了上一个页面。那我们该如何处理这种情况呢？ 2. 解决方案...

H5监听移动端物理/浏览器返回键

全栈-菜鸟

05-10

3501

JavaScript没有监听物理返回键的API，所以只能使用 popstate 事件监听。工具类如下： export function handleBrowserGoBack(back){ console.log("back"); pushHistory(); addPopstateListener(back); } /** * 向历史记录中插入了当前页 */ function pushHistory() { let hash = lo...

监听H5浏览器返回事件，解决监听webviewH5返回事件，触发H5给小程序传参（亲测有效）

m0_47791238的博客

06-22

1万+

小程序通过webview打开H5页面，监听H5返回事件，实现H5返回时，给小程序传递参数

H5页面监听Android物理返回键

weixin_34072159的博客

12-06

3074

Android物理返回键的点击事件，一般webview的默认行为是 window.history.go(-1) ，但是在实际需求场景下，简单的页面回退并不能满足需求，所以需要H5页面监听Android物理返回键从而自定义处理方法。本方案的代码都在 h5_android_back 仓库中原理主要是运用 HTML5 History API 实现。所以，首先简单介绍下 HTML5 History ...

H5监听Android物理返回键

weixin_34220963的博客

07-20

850

问题：H5页面的返回键可以回退到指定页面，但是Android手机的物理返回键会回到上一页。解决办法：以下代码可以实现，Android返回键时调用H5的方法（下面代码中用的是H5的GoBackUrl方法），实现跳转到指定页面。 //拦截安卓回退按钮，调用H5的返回方法 history.pushState(null, null, location.href)...

h5 监听安卓物理返回键

web修理工

04-08

3012

需要监听手机的回退按钮。 1、挂载完成后，判断浏览器是否支持popstate mounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); window.addEventListener('popstate', this.fun, false);//false阻止默认事件 } }, 2、页面销毁时，取消监听。否则其他v

H5监听手机的物理返回按键——已完成

ansheng02的博客

07-16

4139

//监听手机物理返回，然后跳转首页 function pushHistory() { var state = { title: "title", url: "#forward" }; window.history.pushState(state, null, "#forward"); } // 在需要监听的页面执行该方法 p...

h5监听手机物理返回键操作--popstate

dasiy_j的博客

03-06

1万+

最近在开发webapp，h5开发的页面嵌入到app中，暂时先是安卓包。因为画面是一个列表页，每条列表会有一个详情页，为了从详情页返回的时候还在当时列表的位置，用了隐藏div的形式编写了详情页。当遇到手机物理返回键的时候，详情页因为和列表页是同一个页面，这个时候就会返回到首页了。这不是我想要的效果，所以要对手机的物理返回键进行监听，在点击时隐藏div回到列表页。h5 $(function()...

H5页面监听回退事件

AuB__的博客

02-18

6333

H5页面监听回退事件 $(function(){ pushHistory(); window.addEventListener(“popstate”, function(e) { alert(“我监听到了浏览器的返回按钮事件啦”);//根据自己的需求实现自己的功能 }, false); function pushHistory() { var state = { title: “title”, u...