使用JavaScript监听移动端回退键事件-这是一篇涵盖细节的指南
myzbx 2025-01-10 15:42 33 浏览
移动端的回退键通常是指手机或平板设备上的物理返回键或者虚拟返回键，用户点击该键时通常会引起页面的跳转或关闭，因此也需要在 JavaScript 中对该事件进行监听和处理。
本篇文章将为您提供如何使用 JavaScript 监听移动端回退键事件的多种方法，以及如何在处理事件时避免一些常见的问题。
一、使用 popstate 事件监听回退键
在 JavaScript 中，可以使用 `window.history` 对象的 `popstate` 事件监听用户在浏览器中点击了回退或前进按钮的事件，该事件支持移动设备上的回退键，使用方法如下：
```js
window.addEventListener('popstate', function() {
// 处理回退键事件
});
```
`popstate` 事件会在用户点击浏览器的回退或前进按钮或者在 JavaScript 中调用 `history.back()` 或 `history.forward()` 方法时触发，而在移动端，用户点击系统上的回退键同样也会触发该事件。
需要注意的是，使用 `popstate` 事件监听回退键时，不能使用 `history.pushState()` 方法修改页面的 URL，因为该方法只会在浏览器的历史记录中添加一条新记录，并不会触发 `popstate` 事件。如果需要修改页面的 URL 并触发 `popstate` 事件，可以使用 `history.replaceState()` 方法。
二、使用 onbeforeunload 事件监听回退键
除了`popstate`事件，还可以使用`onbeforeunload`事件监听回退键，使用方法如下：
```js
window.onbeforeunload = function() {
// 处理回退键事件
};
```
`onbeforeunload`事件会在窗口或标签页关闭或重新加载之前触发，如果用户点击了系统上的回退键，则会取消页面的关闭或重新加载操作，因此可以在该事件中处理回退事件。
需要注意的是，由于浏览器安全策略的限制，无法在 `onbeforeunload` 事件中弹出任何提示框，只能返回一个字符串值，该值将被浏览器作为提示内容显示在提示框中。
三、多种方法结合使用
除了上述两种方法外，还可以将它们结合起来使用，以达到更好的效果，具体步骤如下：
1. 使用 `pushState()` 方法修改页面的 URL。
```js
history.pushState(null, null, 'newpage.html');
```
2. 立即使用 `location.reload()` 方法重新加载页面。
```js
location.reload();
```
使用这种方法，即使没有真正跳转到新页面，也可以触发 `popstate` 事件，从而实现监听移动端回退键事件的功能。
在处理回退事件时，通常需要判断当前页面是否是最后一页，如果是最后一页，则直接关闭或返回到前一个页面，否则继续回退到上一个页面。
下面给出一个完整的示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>监听手机回退键事件</title>
</head>
<body>
<h1>监听手机回退键事件</h1>
<p>点击下面的按钮跳转到新页面</p>
<button onclick="goToNewPage()">跳转</button>
<script>
// 添加 popstate 事件监听器
window.addEventListener('popstate', function() {
console.log('用户点击了系统回退按钮');
// 判断页面是否是最后一页
if (history.length == 1) {
// 关闭当前页面
window.close();
} else {
// 回退到上一个页面
history.back();
}
});
// 添加 onbeforeunload 事件监听器
window.onbeforeunload = function() {
console.log('用户点击了系统回退按钮');
// 判断页面是否是最后一页
if (history.length == 1) {
// 关闭当前页面
window.close();
}
};
// 跳转到新页面
function goToNewPage() {
history.pushState(null, null, 'newpage.html');
location.reload();
}
</script>
</body>
</html>
```
在该示例代码中，我们实现了监听 `popstate` 事件和 `onbeforeunload` 事件的功能，并且在页面中添加了一个按钮，当用户点击该按钮时，会使用 `history.pushState()` 方法将页面的 URL 改变，然后使用 `location.reload()` 方法重新加载页面，这样就可以触发 `popstate` 和 `onbeforeunload` 事件了。
需要注意的是，因为 `pushState()` 方法只是修改了页面的 URL，并没有真正跳转到新页面，所以为了能够处理回退事件，我们需要在 `pushState()` 方法后面立即调用 `location.reload()` 方法，这样浏览器就会认为我们跳转到了新页面，然后在回退时就可以触发 `popstate` 和 `onbeforeunload` 事件了。
同时，我们还在事件处理函数中添加了判断页面是否是最后一页的代码，如果是最后一页，则直接关闭或返回到前一个页面。如果不加这个判断，当用户点击回退键时，页面会一直回退到浏览器的起始页面，这样就无法正常退出应用了。
总结：
本篇文章介绍了如何使用 JavaScript 监听移动端回退键事件，并提供了多种方法及相应的示例代码。对于需要在移动端开发中处理回退事件的开发人员来说，这些方法都是非常实用的，可以有效地解决移动端回退事件的问题。
相关推荐
- vue 基础-组件中事件的触发和监听
-
前言《vue基础》系列是再次回炉vue记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。（里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读）vue中单纯的事件调用，你一定不陌生...
- JMH基准测试和JMH-Visual-chart可视化
-
原文地址：https://github.com/Sayi/sayi.github.com/issues/68如何度量一段代码的性能，换种实现方式会有更佳的性能表现吗？你或许想知道fastjson是否正...
- 一文轻松看懂丰田汽车的电路图（丰田车电路图识读技巧）
-
丰田汽车电路图符号、含义丰田汽车电路图识读说明电路图中字母是注释标号，其各部分的含义如下：注释标号A：表示系统标题，在电路图上方用横线划分，区域内用文字和系统符号表示下方电路系统的名称。注释标号B：表...
- 杭州高级中学发文言文版校庆公告引热议——全文932字，74处注释
-
阅读提示校方回应：我们期待以这种‘复古’的方式引起公众注意，也算是为树立起大众的文化自信、唤起大众对传统文化的关注作出一点贡献。5月14日，杭州高级中学官方微信发布了一篇文言文版的校庆公告。几个小...
- Python 和 JS 有什么相似?（python和js哪个快）
-
Python是一门运用很广泛的语言，自动化脚本、爬虫，甚至在深度学习领域也都有Python的身影。作为一名前端开发者，也了解ES6中的很多特性借鉴自Python(比如默认参数、解构赋值、...
- 阿里卖家 Flutter for Web 工程实践
-
作者：马坤乐(坤吾)Flutter自2015年初次亮相以来，经过了多年的发展已经相当成熟，在阿里、美团、拼多多等互联网公司都有广泛的应用。在ICBU阿里卖家上90+%的新业务使用Flu...
- 诗经275思文押韵、注释、古音、今韵
-
诗经275-1思文押韵（备注：□=非韵、■=i韵、●=o/u韵、◆=ng韵、=i/o二象性）「」1.思文后稷，克配彼天。立我烝民，莫菲尔极。贻我来牟，帝命率育。无此疆尔界，陈常于时夏。□□□■，...
- SolidWorks中常用命令快捷键（solidworks有哪些快捷键）
-
1.A：中心线2.B：镜向3.C：画圆4.D：智能标柱尺寸5.E：删除6.F：草图倒圆角7.G：画直线8.H：从装配制作工程9.I：等距实体10.J：从装配制作装配11.K：多边形12.L：延伸13....
- 第一章、TS语言简介（tsl语言）
-
TypeScript（简称TS）是微软公司开发的一种基于JavaScript（简称JS）语言的编程语言。它的目的并不是创造一种全新语言，而是增强JavaScript的功能，使其更适合多人合...
- 为什么要用JMH?何时应该用?（日本jmh地面分析图网站）
-
if快还是switch快？HashMap的初始化size要不要指定，指定之后性能可以提高多少？各种序列化方法哪个耗时更短？无论出自何种原因需要进行性能评估，量化指标总是必要的。在大部分场合...
- 雅虎“YSlow - 23 条规则”详尽阐释
-
以下乃是雅虎“YSlow-23条规则”的详尽阐释，旨在优化网页之性能以及用户之体验，乃是结合技术之原理与实践之方法梳理而成：1.减少HTTP请求次数说明：每一次HTTP请求皆会增添延迟...
- JavaScript 运算符（js ~运算符）
-
JavaScript运算符JS变量JS算数JavaScript运算符实例向变量赋值，并把它们相加：varx=7;//向x赋值5vary=8;//向y赋值2...
- 在Notebook中使用Sublime Text 快捷键
-
编程派微信号：codingpy前几天，我在公众号上发布了两篇译文，对JupyterNotebook做了一些基础性的介绍。虽然说比较基础，而且第二篇阅读量并不高，但是我认为对于其他对于Noteb...
- 晨光静好时!2 道 JS 与 TS 面试题解析，开启惬意学习日
-
当第一缕晨光温柔地唤醒窗台的绿植，泡上一杯清香四溢的茉莉花茶，坐在洒满阳光的角落。此刻，放下对面试的焦虑，让我们像聊生活趣事般，轻松拆解两道JavaScript和TypeScript的高频面试...
- 2024年CSPJ题目解析，语法基本功>算法!
-
前言：每次有家长来找我们咨询报课，说孩子学了一年了，竞赛成绩不理想，问怎么才能强化，提升，我们经过一番询问，发现这类孩子普遍都是在算法上已经花了非常多的时间了，但是语法根本不过关。对这种孩子我们普遍建...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)