成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

監(jiān)聽(tīng)微信返回事件踩坑指南

adam1q84 / 896人閱讀

摘要：瀏覽器返回等于重新進(jìn)入上一個(gè)頁(yè)面，會(huì)觸發(fā)刷新動(dòng)作，而微信不會(huì)。也就是困擾我多時(shí)的微信返回不刷新。也就是說(shuō)當(dāng)時(shí)微信返回還是會(huì)觸發(fā)渲染事件的具體是什么事件也不清楚，因?yàn)楫?dāng)時(shí)沒(méi)有深究，但是確實(shí)是觸發(fā)了。

PC瀏覽器返回等于重新進(jìn)入上一個(gè)頁(yè)面，會(huì)觸發(fā)刷新動(dòng)作，而微信不會(huì)。也就是困擾我多時(shí)的微信返回不刷新。

大概再2017年初和2016末（大概也是從那個(gè)時(shí)候我開(kāi)始做微信公眾號(hào)），還可以通過(guò)在sessionStorage中記錄刷新標(biāo)志，讓上一個(gè)頁(yè)面根據(jù)標(biāo)識(shí)刷新。也就是說(shuō)當(dāng)時(shí)微信返回還是會(huì)觸發(fā)渲染事件的（具體是什么事件也不清楚，因?yàn)楫?dāng)時(shí)沒(méi)有深究，但是確實(shí)是觸發(fā)了componentDidMount）。

但是某個(gè)時(shí)刻起，這種方法也不再有效了，說(shuō)明通過(guò)storage記錄需要刷新標(biāo)志是完全失效的了。

另外可以發(fā)現(xiàn)，上一個(gè)頁(yè)面會(huì)保持上一次操作的狀態(tài)，并且不會(huì)再有靜態(tài)資源的請(qǐng)求，不會(huì)觸發(fā)load事件。那也可以這么理解，在微信中的頁(yè)面跳轉(zhuǎn)，其實(shí)更類似于瀏覽器中的打開(kāi)新標(biāo)簽頁(yè)。所以上一個(gè)頁(yè)面的內(nèi)容沒(méi)有被銷掉，而是會(huì)保持你跳走前的狀態(tài)。所以我們很多頁(yè)面會(huì)有點(diǎn)擊返回但是loading還是在轉(zhuǎn)的現(xiàn)象。

嘗試一：visibilitychange

由此，我想到了第一個(gè)檢查他是否返回的方法——監(jiān)聽(tīng)頁(yè)面的visibilitychange事件。因?yàn)镻C瀏覽器中如果標(biāo)簽切換或者是瀏覽器縮略，其可見(jiàn)性改變的時(shí)候，都會(huì)觸發(fā)該事件。

有興趣的可以打開(kāi)控制臺(tái)輸入以下代碼，看看有什么不同。

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") //因?yàn)関isibilitychange事件中alert可以看到被模擬器禁了，所以就改用改了fetch自己的接口，通過(guò)查看日志檢查是否觸發(fā)
 }
});

嘗試之后發(fā)現(xiàn)該事件并沒(méi)有被觸發(fā)。疑惑之余，我嘗試了chrome手機(jī)瀏覽器，發(fā)現(xiàn)同樣，該事件沒(méi)有被觸發(fā)。

另外，因?yàn)楹闷嫒绻鸻pp壓后臺(tái)會(huì)不會(huì)觸發(fā)該事件，所以嘗試這段代碼↓，結(jié)果發(fā)現(xiàn)即使壓后臺(tái)頁(yè)面也不會(huì)被掛起。

setInterval(function () {
  var p = document.createElement("p");
  p.appendChild(document.createTextNode(`${Date.now()}`));
  document.body.appendChild(p);
}, 1000)
嘗試二：pageshow & pagehide

與visibilitychange類似的還有pageshow和pagehide事件。

pageshow事件觸發(fā)點(diǎn)是 a session history entry is being traversed to. 同時(shí)根據(jù)MDN的介紹在back/forward時(shí)也會(huì)被觸發(fā)

于是我改了改代碼

let isPageBack = false;

window.addEventListener("pageshow", function () {
  if (isPageBack ) fetch("/data")
})

window.addEventListener("pagehide", function () {
  isPageBack = true
})

居然意外的能行，，，

pageshow和pagehide事件可以被監(jiān)聽(tīng)到。返回頁(yè)可以通過(guò)頁(yè)面是否隱藏過(guò)知道是否是返回回來(lái)的。

嘗試三：history

history可以修改歷史記錄或url主要是 history.pushState 和 history.replaceState 。

使用pushState 等于多推一條歷史記錄，replaceState 等于修改了歷史記錄，另外我們要知道reload是不計(jì)入歷史記錄的。

理論上來(lái)說(shuō)如果使用pushState修改url，那么頁(yè)面訪問(wèn)就會(huì)像這樣 A -> A1 -> B

當(dāng)B返回A1時(shí)就會(huì)觸發(fā) popstate 事件。在popstate事件里面可以做一些自定義的事情。

這里用了代碼

 var state = {
   date: Date.now()
 };
 window.history.pushState(state, "csb");
 window.addEventListener("popstate", function (event) {
   if(event.state) location.reload()
 })

檢查history時(shí)，可以看到state里面有一個(gè)key是date的時(shí)間戳，同時(shí)歷史記錄的長(zhǎng)度+1。
但是使用pushState會(huì)增加歷史記錄，會(huì)導(dǎo)致同一個(gè)頁(yè)面需要返回好幾次才能退出去，不過(guò)可以利用他做返回退出公眾號(hào)

window.history.pushState({}, "csb");
window.addEventListener("popstate", function (event) {
  if (event.state) { 
    wx.ready(function () {
      wx.closeWindow();
    });
  }
});

但是因?yàn)閞eplaceState不會(huì)增加歷史記錄，所以利用它這樣返回刷新頁(yè)面

history.replaceState(null, null, "#");
window.addEventListener("popstate", function (event) {
 self.location.reload();
})

另外如果要如果A->B->C，而C返回時(shí)想要直接返回A可以這樣

B頁(yè)面：

history.replaceState(null, null, "/c"); //將url替換成C，這樣跳轉(zhuǎn)到C頁(yè)面等于被轉(zhuǎn)變成了reload行為，但直觀上來(lái)說(shuō)，是我們刪除了一條歷史記錄

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93290.html

相關(guān)文章

  • 微信小程序知識(shí)總結(jié)及案例集錦

    摘要：對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑窗口表現(xiàn)設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間設(shè)置多等。 微信小程序知識(shí)總結(jié)及案例集錦 微信小程序的發(fā)展會(huì)和微信公眾號(hào)一樣，在某個(gè)時(shí)間點(diǎn)爆發(fā) 學(xué)習(xí)路徑 微信小程序最好的教程肯定是官方的文檔啦，點(diǎn)擊這里直達(dá) 微信官方文檔 認(rèn)真跟著文檔看一遍，相信有vue前端經(jīng)驗(yàn)的看下應(yīng)該就能上手了，然后安裝 微信小程序開(kāi)發(fā)者工具 新建一個(gè)quick start項(xiàng)目，了解代碼結(jié)構(gòu)，...

    sean 評(píng)論0 收藏0

  • Wepy-小程序踩坑記

    摘要：引言用過(guò)原生開(kāi)發(fā)的小程序也知道除了其他功能性的內(nèi)容并不多對(duì)于需要做大型項(xiàng)目來(lái)說(shuō)是比較難入手的，因此朋友推薦的我就入坑鳥(niǎo)。。。開(kāi)發(fā)還是和部分有出入，因此如下記錄，入手的教程就不發(fā)了只發(fā)踩坑。 引言 用過(guò)原生開(kāi)發(fā)的小程序也知道除了api 其他功能性的內(nèi)容并不多對(duì)于需要做大型項(xiàng)目來(lái)說(shuō)是比較難入手的，因此朋友推薦的wepy我就入坑鳥(niǎo)。。。這么一個(gè)跟vue的開(kāi)發(fā)方式類似的框架，不過(guò)說(shuō)起來(lái)跟vue...

    tinna 評(píng)論0 收藏0

  • H5視頻活動(dòng)踩坑

    摘要：最近做了一些嵌入視頻的活動(dòng)，積累了點(diǎn)視頻方面的經(jīng)驗(yàn)，下面記錄下別人和自己踩過(guò)的坑以及相應(yīng)的解決方案。視頻的播放和暫停主要是調(diào)用和方法。最后需要注意的是在端播放視頻后是不會(huì)主動(dòng)退出同層播放器的。 最近做了一些嵌入視頻的活動(dòng)，積累了點(diǎn)視頻方面的經(jīng)驗(yàn)，下面記錄下別人和自己踩過(guò)的坑以及相應(yīng)的解決方案。1、碰到問(wèn)題和解決方案1.1、ios 網(wǎng)頁(yè)中播放視頻默認(rèn)全屏（點(diǎn)擊視頻會(huì)彈出播放器進(jìn)行全屏播放...

    walterrwu 評(píng)論0 收藏0

  • H5視頻活動(dòng)踩坑

    摘要：最近做了一些嵌入視頻的活動(dòng)，積累了點(diǎn)視頻方面的經(jīng)驗(yàn)，下面記錄下別人和自己踩過(guò)的坑以及相應(yīng)的解決方案。視頻的播放和暫停主要是調(diào)用和方法。最后需要注意的是在端播放視頻后是不會(huì)主動(dòng)退出同層播放器的。 最近做了一些嵌入視頻的活動(dòng)，積累了點(diǎn)視頻方面的經(jīng)驗(yàn)，下面記錄下別人和自己踩過(guò)的坑以及相應(yīng)的解決方案。1、碰到問(wèn)題和解決方案1.1、ios 網(wǎng)頁(yè)中播放視頻默認(rèn)全屏（點(diǎn)擊視頻會(huì)彈出播放器進(jìn)行全屏播放...

    jzman 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<