這篇文章給大家分享的是有關(guān)JS如何實現(xiàn)返回上一頁并刷新頁面的方法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
具體如下：
正常情況下我們通過 history.back() 或者 history.go(-1) 返回上一級頁面的時候，是不會刷新頁面的。這種不刷新頁面包含兩種情況：
在 android 或者 pc 瀏覽器中看到的頁面有刷新的效果，其實不是這樣的，這個時候的所有的資源都是從緩存中加載來的。我們通過瀏覽器調(diào)試工具可以看到 from disk cache 或者 from memory cache。
在 ios 中甚至于返回到了上一頁后，連上一頁的腳本文件都沒有執(zhí)行; (其實不是沒有執(zhí)行，是執(zhí)行了onpageshow)
上網(wǎng)搜索 ios 返回上一頁并刷新頁面的時候，會看到的解決方案有監(jiān)聽 onpageshow 事件, 通過查看文檔可以知道 onpageshow 事件中，可以通過使用 PageTransitionEvent 對象的 persisted 屬性來判斷，頁面是直接從服務(wù)器上載入還是從緩存中讀??； 如果頁面從瀏覽器的緩存中讀取該屬性返回 ture，否則返回 false。
在 ios 中如果要實現(xiàn)，返回上一頁并刷新頁面的話，可以在上一頁的腳本文件中加入如下代碼：
重慶分公司
重慶分公司
window.addEventListener('pageshow', function(event) {
if(event.persisted) { // ios 有效, android 和 pc 每次都是 false
sessionStorage.removeItem('refresh');
location.reload();
}
});但是這種方式在 android 和 pc 的瀏覽器中沒有效果，經(jīng)過嘗試會發(fā)現(xiàn) android 和 pc 的瀏覽器中每一次進入 pageshow事件后，event.persisted 永遠都是返回 false。
不管是在任何情況下，都會監(jiān)聽到 pageshow事件。既然能進入這個函數(shù)，那就得想辦法在這個函數(shù)里判斷是否需要刷新頁面?？梢酝ㄟ^緩存的方式 localStorage 或 sessionStorage 或 cookie。
要在頁面中判斷是否需要刷新，那就得在從下一級返回過來的時候，往 cache中存入需要刷新。
sessionStorage.setItem('refresh', 'true');
history.go(-1);然后在上一級也頁面獲取并判斷
if(sessionStorage.getItem('refresh') === 'true') {
sessionStorage.removeItem('refresh');
location.reload();
}綜合兼容所有設(shè)備的返回上一頁并刷新頁面的方式為：
window.addEventListener('pageshow', function(event) {
if(event.persisted) { // ios 有效, android 和 pc 每次都是 false
location.reload();
} else { // ios 除外
if(sessionStorage.getItem('refresh') === 'true') {
location.reload();
}
}
sessionStorage.removeItem('refresh');
});注意：
1. 在下一級頁面返回的時候，要標記需要刷新頁面(set)
2. 在判斷完成后，一定要刪除之前的存儲(remove)避免出現(xiàn)無限重載的情況
感謝各位的閱讀！關(guān)于“JS如何實現(xiàn)返回上一頁并刷新頁面的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
