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

點(diǎn)擊瀏覽器中的返回按鈕，要讓頁面重新加載資源。因?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í)加快頁面的轉(zhuǎn)換速度。這個(gè)緩存不僅保存頁面數(shù)據(jù)，還保存了DOM和JS的狀態(tài)，實(shí)際上是將整個(gè)頁面都保存在內(nèi)存里。如果頁面位于bfcache中，那么再次打開該頁面就不會(huì)觸發(fā)onload事件

pageshow事件

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

pagehide事件

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

persisted屬性

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

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

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

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

解決方案：

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

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

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

javascript監(jiān)聽pagehide事件阻止頁面進(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)簽，清除頁面緩存

<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" />

Cache-Control指定請(qǐng)求和響應(yīng)遵循的緩存機(jī)制。在請(qǐng)求消息或響應(yīng)消息中設(shè)置Cache-Control并不會(huì)修改另一個(gè)消息處理過程中的緩存處理過程。請(qǐng)求時(shí)的緩存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，響應(yīng)消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各個(gè)消息中的指令含義如下

• Public指示響應(yīng)可被任何緩存區(qū)緩存
• Private指示對(duì)于單個(gè)用戶的整個(gè)或部分響應(yīng)消息，不能被共享緩存處理。這允許服務(wù)器僅僅描述當(dāng)用戶的部分響應(yīng)消息，此響應(yīng)消息對(duì)于其他用戶的請(qǐng)求無效
• no-cache指示請(qǐng)求或響應(yīng)消息不能緩存
• no-store用于防止重要的信息被無意的發(fā)布。在請(qǐng)求消息中發(fā)送將使得請(qǐng)求和響應(yīng)消息都不使用緩存。
• max-age指示客戶機(jī)可以接收生存期不大于指定時(shí)間（以秒為單位）的響應(yīng)
• min-fresh指示客戶機(jī)可以接收響應(yīng)時(shí)間小于當(dāng)前時(shí)間加上指定時(shí)間的響應(yīng)
• max-stale指示客戶機(jī)可以接收超出超時(shí)期間的響應(yīng)消息。如果指定max-stale消息的值，那么客戶機(jī)可以接收超出超時(shí)期指定值之內(nèi)的響應(yīng)消息。

注：有些情況下設(shè)置清除緩存也沒有起到作用，我自己做的這個(gè)h5頁面就沒有起到效果。具體情況還是要具體分析。

我遇到的情況：

<div class="content">
<iframe id="iframe" src="https://cpu.baidu.com/xx/xx/xxx" frameborder="no" scrolling="no"></iframe>
</div>

這個(gè)iframe中的地址每次刷新頁面都會(huì)有不同的內(nèi)容推送給用戶。進(jìn)入iframe中的內(nèi)容之后，按返回按鈕返回來想進(jìn)行頁面自動(dòng)刷新，為的就是讓用戶看到新的內(nèi)容。

做法：

使用pageshow進(jìn)行整個(gè)頁面刷新

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

這樣可以實(shí)現(xiàn)。

后面又覺得不妥，沒有因?yàn)檫@個(gè)小部分而進(jìn)行整個(gè)頁面刷新，想到了另一種思路：因?yàn)檫@個(gè)iframe中的內(nèi)容是動(dòng)態(tài)的，可以對(duì)其進(jìn)行定時(shí)器設(shè)置，如下：

let iframe = document.getElementById('iframe')
setInterval(() => {
iframe.setAttribute("src", "https://cpu.baidu.com/xx/xx/xx");
},15000)

這樣也可以實(shí)現(xiàn)自己的功能。

最后可以結(jié)合一下：

let iframe = document.getElementById('iframe')
window.addEventListener('pageshow', function (e) {
 if (e.persisted) {
  iframe.setAttribute("src", "https://cpu.baidu.com/xx/xx/xx");
 }
})

這樣做也有好處，可以避免使用定時(shí)器，對(duì)網(wǎng)頁的性能也是比較好。但是這個(gè)方法在返回的時(shí)候，可以看到iframe里面內(nèi)容的重新加載，會(huì)有一個(gè)時(shí)間間隙。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論