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