监听微信返回事宜踩坑指南

PC浏览器返回即是从新进入上一个页面,会触发革新行动,而微信不会。也就是搅扰我多时的微信返回不革新。

也许再2017年终和2016末(也许也是从那个时刻我最先做微信民众号),还能够经由过程在sessionStorage中纪录革新标志,让上一个页面依据标识革新。也就是说当时微信返回照样会触发衬着事宜的(详细是什么事宜也不清楚,由于当时没有穷究,然则确实是触发了componentDidMount)。

然则某个时刻起,这类要领也不再有用了,申明经由过程storage纪录须要革新标志是完整失效的了。

别的能够发明,上一个页面会坚持上一次操纵的状况,而且不会再有静态资本的要求,不会触发load事宜。那也能够这么明白,在微信中的页面跳转,实在更相似于浏览器中的翻开新标签页。所以上一个页面的内容没有被销掉,而是会坚持你跳走前的状况。所以我们许多页面会有点击返回然则loading照样在转的征象。

尝试一:visibilitychange

由此,我想到了第一个搜检他是不是返回的要领——监听页面的visibilitychange事宜。由于PC浏览器中假如标签切换或者是浏览器缩略,其可见性改变的时刻,都邑触发该事宜。

有兴致的能够翻开控制台输入以下代码,看看有什么差别。

window.addEventListener('visibilitychange', function () {
  console.log(document.hidden)
});

总之我先尝试了以下代码:

let isPageBack = false; 

window.addEventListener('visibilitychange', function () {
  if(document.hiden){ 
     isPageBack = true
 } else if ( isPageBack ) {
     fetch('/data') //由于visibilitychange事宜中alert能够看到被模拟器禁了,所以就改用改了fetch本身的接口,经由过程检察日记搜检是不是触发
 }
});

尝试以后发明该事宜并没有被触发。迷惑之余,我尝试了chrome手机浏览器,发明一样,该事宜没有被触发。

别的,由于猎奇假如app压背景会不会触发该事宜,所以尝试这段代码↓,效果发明纵然压背景页面也不会被挂起。

setInterval(function () {
  var p = document.createElement('p');
  p.appendChild(document.createTextNode(`${Date.now()}`));
  document.body.appendChild(p);
}, 1000)

尝试二:pageshow & pagehide

与visibilitychange相似的另有pageshowpagehide事宜。

pageshow事宜触发点是 a session history entry is being traversed to. 同时依据MDN的引见在back/forward时也会被触发

因而我改了改代码

let isPageBack = false;

window.addEventListener('pageshow', function () {
  if (isPageBack ) fetch('/data')
})

window.addEventListener('pagehide', function () {
  isPageBack = true
})

竟然不测的能行,,,

pageshowpagehide事宜能够被监听到。返回页能够经由过程页面是不是隐蔽过晓得是不是是返回返来的。

尝试三:history

history能够修正历史纪录或url主如果 history.pushStatehistory.replaceState

运用pushState 即是多推一条历史纪录,replaceState 即是修正了历史纪录,别的我们要晓得reload是不计入历史纪录的。

理论上来讲假如运用pushState修正url,那末页面接见就会像如许 A -> A1 -> B

当B返回A1时就会触发 popstate 事宜。在popstate事宜内里能够做一些自定义的事变。

这里用了代码

 var state = {
   date: Date.now()
 };
 window.history.pushState(state, 'csb');
 window.addEventListener('popstate', function (event) {
   if(event.state) location.reload()
 })

搜检history时,能够看到state内里有一个key是date的时候戳,同时历史纪录的长度+1。
然则运用pushState会增添历史纪录,会致使同一个页面须要返回好几次才退出去,不过能够应用他做返回退出民众号

window.history.pushState({}, 'csb');
window.addEventListener('popstate', function (event) {
  if (event.state) { 
    wx.ready(function () {
      wx.closeWindow();
    });
  }
});


然则由于replaceState不会增添历史纪录,所以应用它如许返回革新页面

history.replaceState(null, null, '#');
window.addEventListener('popstate', function (event) {
 self.location.reload();
})

别的假如要假如A->B->C,而C返回时想要直接返回A能够如许

B页面:

history.replaceState(null, null, '/c'); //将url替换成C,如许跳转到C页面即是被改变成了reload行动,但直观上来讲,是我们删除了一条历史纪录
    原文作者:魔力叉烧包
    原文地址: https://segmentfault.com/a/1190000013629280
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞