摘要:瀏覽器返回等于重新進入上一個頁面,會觸發刷新動作,而微信不會。也就是困擾我多時的微信返回不刷新。也就是說當時微信返回還是會觸發渲染事件的具體是什么事件也不清楚,因為當時沒有深究,但是確實是觸發了。
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事件可以被監聽到。返回頁可以通過頁面是否隱藏過知道是否是返回回來的。
嘗試三:historyhistory可以修改歷史記錄或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行為,但直觀上來說,是我們刪除了一條歷史記錄
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93290.html
摘要:對微信小程序進行全局配置,決定頁面文件的路徑窗口表現設置網絡超時時間設置多等。 微信小程序知識總結及案例集錦 微信小程序的發展會和微信公眾號一樣,在某個時間點爆發 學習路徑 微信小程序最好的教程肯定是官方的文檔啦,點擊這里直達 微信官方文檔 認真跟著文檔看一遍,相信有vue前端經驗的看下應該就能上手了,然后安裝 微信小程序開發者工具 新建一個quick start項目,了解代碼結構,...
摘要:引言用過原生開發的小程序也知道除了其他功能性的內容并不多對于需要做大型項目來說是比較難入手的,因此朋友推薦的我就入坑鳥。。。開發還是和部分有出入,因此如下記錄,入手的教程就不發了只發踩坑。 引言 用過原生開發的小程序也知道除了api 其他功能性的內容并不多對于需要做大型項目來說是比較難入手的,因此朋友推薦的wepy我就入坑鳥。。。這么一個跟vue的開發方式類似的框架,不過說起來跟vue...
閱讀 702·2021-11-18 10:02
閱讀 3579·2021-09-02 10:21
閱讀 1725·2021-08-27 16:16
閱讀 2057·2019-08-30 15:56
閱讀 2385·2019-08-29 16:53
閱讀 1372·2019-08-29 11:18
閱讀 2951·2019-08-26 10:33
閱讀 2640·2019-08-23 18:34