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 深拷贝函数
Dec 04 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 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读取html并截取字符串的简单代码
2009/11/30 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
[01:46]新英雄登场
2019/09/10 DOTA
使用python turtle画高达
2020/01/19 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
Weblogic的布署方式
2013/08/23 面试题
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
教师师德承诺书2016
2016/03/25 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP
JavaScript 反射学习技巧
2021/10/16 Javascript