vue项目中监听手机物理返回键的实现


Posted in Javascript onJanuary 18, 2020

背景:项目中有一个场景要监听android手机物理返回键,但是app和js的中间件又没提供这个事件的监听,只能百度纯js实现了

第一步:

xback.js

;!function(pkg, undefined){
 var STATE = 'x-back';
 var element;
 var onPopState = function(event){
  event.state === STATE && fire();
 }
 var record = function(state){
  history.pushState(state, null, location.href);
 }
 var fire = function(){
  var event = document.createEvent('Events');
  event.initEvent(STATE, false, false);
  element.dispatchEvent(event);
 }
 var listen = function(listener){
   element.addEventListener(STATE, listener, false);
  }
 ;!function(){
  element = document.createElement('span');
  window.addEventListener('popstate', onPopState);
  this.listen = listen;
  this.record = record(STATE);
  record(STATE);
 }.call(window[pkg] = window[pkg] || {});
}('XBack');

第二步:

加载xback.js文件

<remote-script src="../js/xback.js" @load="loadXBack"></remote-script>

自定义组件remote-script可以参考我另外的一篇文章:https://3water.com/article/178777.htm

第三步:

监听返回键事件

methods: {
  // JavaScript监听手机物理返回键
   loadXBack () {
    window.XBack.listen(() => {
     this.dialog = this.$createDialog({
      type: 'confirm',
      content: `确定返回吗?`,
      confirmButton: {
       text: '确定',
       active: true,
       disabled: false
      },
      cancelButton: {
       text: '取消',
       active: false,
       disabled: false
      },
      onConfirm: () => {
       this.dialog.hide()
       this.close()
      },
      onCancel: () => {
       this.dialog.hide()
       window.history.pushState('x-back', null, window.location.href)
      }
     })
     this.dialog.show()
    })
   },
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript入门学习资料收集整理篇
Jul 06 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
node.js中的console用法总结
Dec 15 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
使用JS实现简易计算器
Jun 14 Javascript
vue组件内部引入外部js文件的方法
Jan 18 #Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 #Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 #Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 #Javascript
JS数组方法slice()用法实例分析
Jan 18 #Javascript
JS实现横向轮播图(中级版)
Jan 18 #Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 #Javascript
You might like
用来给图片加水印的PHP类
2008/04/09 PHP
php文档更新介绍
2011/07/22 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
Javascript Global对象
2009/08/13 Javascript
jQuery示例收集
2010/11/05 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
Python中字符编码简介、方法及使用建议
2015/01/08 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
Europcar意大利:汽车租赁
2019/07/07 全球购物
开水果连锁店创业计划书
2013/12/29 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
离婚协议书的范本
2015/01/27 职场文书
超强台风观后感
2015/06/09 职场文书
企业法人代表证明书
2015/06/18 职场文书
python文件目录操作之os模块
2021/05/08 Python
nginx配置之并发频次限制
2022/04/18 Servers