anyuan2002.com - vwin网

查找: 您的方位主页 > 网络频道 > 阅览资讯:微信浏览器中禁用撤退按钮并弹窗

微信浏览器中禁用撤退按钮并弹窗

2019-03-31 20:42:35 来历:www.anyuan2002.com 【

微信浏览器中禁用撤退按钮并弹窗

最近在做项意图时分,有一个需求是当用户点击微信浏览器自带的撤退按钮时,阻挠浏览器自带的撤退操作,并弹窗让用户自己挑选是否撤退。下面来看详细的解决计划。

解决办法

从原理上来说,咱们是无法阻挠浏览器的撤退操作的,包含运用event.preventDefault()。所以咱们只能换一种思路,浏览器撤退操作其实便是从历史记载栈中pop一个元素。所以,只需咱们在进入运用的时分多push一个记载,这样当浏览器撤退的时分pop的便是咱们之前push的元素,然后到达坚持当时的history state的意图,再经过监听popstate事情,进行咱们需求的一系列操作。

代码
pushHistory () {
  let state = {
    title: '',
    url: window.location.href
  };
  window.history.pushState(state, state.title, state.url);
}

首先是pushHistory,这个办法首要运用了浏览器中history的pushState办法,往state栈中push了一个新的state。

windowListener () {
  let that = this
  this.$vux.confirm.show({
    title: '提示',
    content: '确认要抛弃此次修改?',
    onCancel () {
      that.pushHistory()
    },
    onConfirm () {
      window.history.back()
      that.replace('/demo/mine')
    }
  })
 },

接下来是listener办法,当监听到state改变的时分,进行弹窗,用户点击撤销时,再次运用pushHistory办法push一个state,这样就可以完成禁用撤退按钮功用,确认的时分要运用一个window.history.back(),原因是发现运用replace跳转出去后会存在一个空的state,导致撤退按钮点两次才会收效,所以运用hisotry.back()办法撤退一次,将空的state铲除,这样state栈便是正常的了。

mounted () {
  this.pushHistory()
  window.addEventListener('popstate', this.windowListener, false)
},
beforeDestroy () {
  window.removeEventListener('popstate', this.windowListener)
}

最终便是在mounted中对popstate的监听和beforeDestroy中的解绑。

 
 

本文地址:http://www.anyuan2002.com/a/question/100176.html
Tags: 微信 浏览器 撤退
修改:vwin网
关于咱们 | 联络咱们 | 友情链接 | 网站地图 | Sitemap | App | 回来顶部