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

2024年5月2日 247次阅读 来源: 魔力叉烧包

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相似的另有pageshow和pagehide事宜。

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
})

竟然不测的能行，，，

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

尝试三：history

history能够修正历史纪录或url主如果 history.pushState 和 history.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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞