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

5

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行为,但直观上来说,是我们删除了一条历史记录

你可能感兴趣的

魔力叉烧包 作者 · 3月12日

IOS 8.2 微信 6.5.19
返回刷新皆无效。
并且使用replaceState会造成一直reload

回复

魔力叉烧包 作者 · 3月24日

IOS 11.0
微信 6.5.1
pageshow方法无效

回复

载入中...