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

背景：项目中有一个场景要监听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://www.jb51.net/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()
    })
   },
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)

    [注]:popstate 事件 a.当活动历史记录条目更改时,将触发popstate事件. b.如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本. c.需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件. d.只有在做出浏览器动作时,才会触发该事件,如用

  • vue中监听返回键问题

    问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿 解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpopup事件 分析:pushstate 从该方法名我们可以知道 是增加某种状态,会为history对象的length增加长度, 点击返回键的时候会触发onpopup事件(可以联想到 pop其实是数组删除的最后一个元素,符合  '栈' 的思想): onpopup触发返回上一页,而 pushstate仅仅是

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

    背景:项目中有一个场景要监听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

  • JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventListener("popstate", function(e) { window.location = 'http://www.baidu.com'; }, false); function pushHistory() { var state = { title: "title&quo

  • 在vue项目中利用popstate处理页面返回的操作介绍

    需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history和浏览器刷新popstate状态 实现: 1.在mounted() 阶段判断并添加popstate事件监听,History.pushState()(参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址), 注意:IOS版的微信,是会立即触发popstate事件,所以需要pageshow做下处理,(当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件.(这包括了后退/

  • vue项目如何监听localStorage或sessionStorage的变化

    出现这个问题的起因:在一个VUE页面中,引入两个组件,A组件实现基础信息展示,B组件展示列表,我要通过A组件的一个按钮触发状态,然后B组件根据A组件触发的状态来做业务处理,首先想到的是把状态放在localStorage,接下去就是在B组件怎么监听A组件状态 解决方法: 1.首先在 main.js 中给 Vue.protorype 注册一个全局方法,然后创建一个 StorageEvent 方法,当我在执行sessionStorage.setItem(k, val) 的时候,初始化事件并派发事件.

  • 详解.vue文件中监听input输入事件（oninput）

    详解.vue文件中监听input输入事件（oninput）

    .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput. oninput 事件在用户输入时触发,菜鸟教程中的用法是: 但是在.vue中这样写是没有作用的: <input type="text" id="cardsNum2" value="1" @oninput =&quo

  • vue在App.vue文件中监听路由变化刷新页面操作

    在路由跳转时,会出现页面需要重新刷新一遍才能获取数据加载页面,这时添加一个监听器,如果跳转到页面刷新一次. export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ return { isRouterAlive:true, } }, //监听器 watch: { // 方法1 '$route' (to, from) { //监听路由是否变化 // console.log(999) if(to.

  • 前端项目中监听localStorage的变化

    前端项目中监听localStorage的变化

    目录 背景 解题思路 第一种:storageEvent 第二种:封装localStroage 背景 前几天有位兄弟问我,如何去监听localStorage的变化呢??我确实是没遇到过这种场景,但是我仔细想想,似乎想要达到这样的效果,其实也不难. 解题思路 第一种:storageEvent 其实JavaScript原生就有一个监听localStorage变化的事件——storage,使用方法如下 window.addEventListener('storage', () => { // callb

  • Vue watch中监听值的变化,判断后修改值方式

    Vue watch中监听值的变化,判断后修改值方式

    目录 watch监听值的变化,判断后修改值 watch监听data函数中数据改变的三种方式 1.常用型(浅层监听) 2.深层监听(利用deep属性) 3.深层监听某一个特定属性(用字符串表示对象属性的调用) watch监听值的变化,判断后修改值 计数器有最小值与最大值的限制,且中间的文本输入框可自己输入值. 实现方式是在watch中监听文本输入框绑定的v-model,跟最大最小值比较后,如果有需要,则改变值. <mu-text-field v-model.number="weightNum

  • Vue项目中Api的组织和返回数据处理的操作

    项目中的所有Api配置放在一个文件中,便于查找和修改,Api的版本从配置文件(config.js)中读取,采用 apiPrefix + url 的形式组成. 在配置文件中,Api 的配置采用 Http请求方式 url 的方式,默认情况下 GET 可以不写,请求方式统一采用大写形式,动态参数采用 : 占位符 的形式. // services/api.js export default { login: 'POST /login', logout: '/logout', queryUser: '/u

随机推荐