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 相关文章推荐
JS localStorage实现本地缓存的方法
Jun 22 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
javascript回调函数的概念理解与用法分析
May 27 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
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
小试JQuery的AutoComplete插件
2011/05/04 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
Python函数式编程指南(四):生成器详解
2015/06/24 Python
python遍历目录的方法小结
2016/04/28 Python
python读取和保存图片5种方法对比
2018/09/12 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
python获取地震信息 微信实时推送
2019/06/18 Python
python里 super类的工作原理详解
2019/06/19 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
网络安全方面的面试题
2015/11/04 面试题
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
信息科学与技术专业求职信范文
2014/02/20 职场文书
我爱我校演讲稿
2014/05/21 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
自主招生自荐信范文
2015/03/04 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
Python+Appium新手教程
2021/04/17 Python
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL