項(xiàng)目中的需求：

點(diǎn)擊瀏覽器中的返回按鈕，要讓頁(yè)面重新加載資源。因?yàn)檫@部分的資源每次去加載的內(nèi)容都不一樣，如果返回的時(shí)候，還是看到原先的內(nèi)容，那做這個(gè)內(nèi)容塊的意義就很小了；而如果用戶看完了這部分內(nèi)容，再返回來的時(shí)候，這個(gè)地方換成了新的內(nèi)容，這樣就能體現(xiàn)這部分的價(jià)值了。

而對(duì)于瀏覽器來說，大部分瀏覽器的返回是直接使用緩存的，不會(huì)執(zhí)行任何的javascript代碼。原因：部分瀏覽器在后退時(shí)不會(huì)觸發(fā)onload事件，這是HTML5世代瀏覽器新增的特性之一——Back-Forward Cache(簡(jiǎn)稱bfcache)

什么是bfcache？

bfcache，即back-forward cache，可稱為“往返緩存”，可以在用戶使用瀏覽器的“后退”和“前進(jìn)”按鈕時(shí)加快頁(yè)面的轉(zhuǎn)換速度。這個(gè)緩存不僅保存頁(yè)面數(shù)據(jù)，還保存了DOM和JS的狀態(tài)，實(shí)際上是將整個(gè)頁(yè)面都保存在內(nèi)存里。如果頁(yè)面位于bfcache中，那么再次打開該頁(yè)面就不會(huì)觸發(fā)onload事件

pageshow事件

這個(gè)事件在用戶瀏覽網(wǎng)頁(yè)時(shí)觸發(fā)，pageshow 事件類似于 onload 事件，onload 事件在頁(yè)面第一次加載時(shí)觸發(fā)， pageshow 事件在每次加載頁(yè)面時(shí)觸發(fā)，即 onload 事件在頁(yè)面從瀏覽器緩存中讀取時(shí)不觸發(fā)。

pagehide事件

該事件會(huì)在用戶離開網(wǎng)頁(yè)時(shí)觸發(fā)。離開網(wǎng)頁(yè)有多種方式。如點(diǎn)擊一個(gè)鏈接，刷新頁(yè)面，提交表單，關(guān)閉瀏覽器等。pagehide 事件有時(shí)可以替代 unload事件，但 unload 事件觸發(fā)后無(wú)法緩存頁(yè)面。

persisted屬性

pageshow事件和pagehide事件的event對(duì)象還包含一個(gè)名為persisted的布爾值屬性。

　　對(duì)于pageshow事件，如果頁(yè)面是從bfcache中加載的，則這個(gè)屬性的值為true；否則，這個(gè)屬性的值為false。

　　對(duì)于pagehide事件，如果頁(yè)面在卸載之后被保存在bfcache中，則這個(gè)屬性的值為true；否則，這個(gè)屬性的值為false。

不同的瀏覽器在對(duì)當(dāng)前窗口‘打開'歷史記錄中的前一個(gè)頁(yè)面的表現(xiàn)上并不統(tǒng)一，這和瀏覽器的實(shí)現(xiàn)以及頁(yè)面本身的設(shè)置有關(guān)系。

解決方案：

javascript監(jiān)聽pageshow事件阻止頁(yè)面進(jìn)入bfcache

window.addEventListener('pageshow', function (e) {if (e.persisted) {window.location.reload()}})

在uc和微信中測(cè)試通過，但是在某些安卓手機(jī)自帶的瀏覽器中無(wú)效。

javascript監(jiān)聽pagehide事件阻止頁(yè)面進(jìn)入bfcache

window.addEventListener('pagehide', function (e) { var dom = document.body; dom.children.remove(); setTimeout(function () {  dom.appendChild("<script type='text/javascript'>window.location.reload();<//script>"); });});

設(shè)置meta標(biāo)簽，清除頁(yè)面緩存

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" />