ios下popstate觸發的問題

loostudy 發布于2019-08-26 10:26 / 2897人閱讀

摘要：去查看一下的源碼，發現被改裝了，監聽的回調回在事件觸發的時候觸發。搞清楚的觸發機制根據的描述當活動歷史記錄條目更改時，將觸發事件。說明了上，依舊不能阻止的觸發。最終解決由于刷新重新加載是肯定不會觸發的，所以可以后進行。

背景：

在使用Tarojs開發的時候，發現在ios上跳轉至其他頁面，再返回回來會出現接口接連調用兩次的情況。

排查過程：

1.由于接口調用在組件的didMount里，所以看其他的組件也是didMount調用兩次，這讓我感覺很詫異，componentDidMount這個生命周期應該不會調用兩次的；

2.我打開了weinre查看，發現了有兩個一模一樣的頁面組件，如下圖

因為是router層級上double了，所以所有組件都會實例化兩次，此時我懷疑是taro/router的問題。

我又去看了一下果園是否也是有同樣的情況，結果發現在page componentDidMount里調用的tree/get等首屏數據接口調用了兩次。。。

去查看一下@tarojs/router的源碼，發現

history被tarojs/router改裝了，history.listen監聽的回調回在popstate事件觸發的時候觸發。

現在的問題根源確定了是由于popstate事件的觸發，導致了tarojs/router認為當前頁面是進行了一次前端路由跳轉，所以進行了兩次頁面級別的渲染，導致所有的組件實例的生命周期都走了兩次。那么問題來了，明明我們根本沒有利用history的特性，所有的跳轉都是刷新式跳轉，為什么這個popstate會觸發呢。

3.搞清楚popstate的觸發機制

根據MDN的描述：

當活動歷史記錄條目更改時，將觸發popstate事件。如果被激活的歷史記錄條目是通過對history.pushState（）的調用創建的，或者受到對history.replaceState（）的調用的影響，popstate事件的state屬性包含歷史條目的狀態對象的副本。

需要注意的是調用history.pushState()或history.replaceState()不會觸發popstate事件。只有在做出瀏覽器動作時，才會觸發該事件，如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調用history.back()）

理論上popstate是不會在我們的應用了觸發的，我試驗了一下這個東西究竟是何方神圣。

var a = document.getElementById("a");

a.onclick = function() {

  location.href = "/aaa.html"

}

window.addEventListener(‘popstate’, function handlePopState() {

  console.log("handlePopState")

}, false);

點擊后返回，壓根沒有觸發popstate，不管在ios還是android上。

然后我將

location.href = ‘/aaa.html"

替換成

history.replaceState(null, "", "aaa.html");

在ios上返回是無刷新式的返回，觸發了popstate事件，僅僅url回退成popstate.html。

在android上返回是刷新式返回，同樣觸發了popstate事件，然后會重新解析/加載/執行。

到這里已經確定了location.href的跳轉后返回是不會觸發popstate的，因為是刷新式的返回，那就是我們在業務里有動了history的api，此時我懷疑是在業務底層代碼使用了history。

4.查看業務底層跳轉代碼

看到navigation.forward在H5僅僅使用了location.href進行跳轉，但是在此之前為了加is_back參數表示當前頁面是通過回退到達的，使用了history.replaceState。

我模擬一下這個操作

var a = document.getElementById("a");

a.onclick = function() {

  history.replaceState(null, "", "popstate33.html?a=1");

  location.href = "/aaa.html"

}

果不其然，在ios里在返回的時候會觸發popstate事件，而android不會觸發。

說明了ios上，依舊不能阻止popstate的觸發。

5.解決方案

由于在ios中返回頁面會觸發popstate，在tarojs/router此時認為進行了一次前端路由

5.1 在進入頁面后根據is_back進行一次reload

5.2 在底層跳轉代碼包上進行再一次包裝，跳轉的時候不再使用history.replaceState

然而。。。。。。。

tarojs/router有這么一行- -，也就是業務層不使用history.replaceState，它自己本身也用了，我把這行注釋掉，且業務上不使用replaceState，ios回退才不會觸發popstate。

所以。。。。

5.1由于不能使用replaceState將is_back去掉，不然將無限循環刷新；

5.2由于tarojs/router本身自己使用了history.replaceState，也沒有了意義。

一切又回到了起點。。。。

最終解決

由于刷新重新加載是肯定不會觸發popstate的，所以可以replaceState后進行reload。

云服務器 GPU云服務器 ios10的適配問題 iOS頭像和昵稱的問題不觸發鼠標按下事件 popstate

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106161.html

在單頁應用中，如何優雅的監聽url的變化

摘要：單頁應用的原理從早起的根據的變化，到根據的的變化，實現無刷新條件下的頁面重新渲染。那么在單頁應用中是如何監聽的變化呢，本文將總結一下，如何在單頁頁面中優雅的監聽的變化。在下幾章中，重點介紹一下如何監聽的改變。 ??單頁應用的原理從早起的根據url的hash變化，到根據H5的history的變化，實現無刷新條件下的頁面重新渲染。那么在單頁應用中是如何監聽url的變化呢，本文將總結一下，...

leap_frog 2019-08-30 15:55 評論0 收藏0
在單頁應用中，如何優雅的監聽url的變化

摘要：單頁應用的原理從早起的根據的變化，到根據的的變化，實現無刷新條件下的頁面重新渲染。那么在單頁應用中是如何監聽的變化呢，本文將總結一下，如何在單頁頁面中優雅的監聽的變化。在下幾章中，重點介紹一下如何監聽的改變。 ??單頁應用的原理從早起的根據url的hash變化，到根據H5的history的變化，實現無刷新條件下的頁面重新渲染。那么在單頁應用中是如何監聽url的變化呢，本文將總結一下，...

姘存按 2019-08-02 14:00 評論0 收藏0
在單頁應用中，如何優雅的監聽url的變化

摘要：單頁應用的原理從早起的根據的變化，到根據的的變化，實現無刷新條件下的頁面重新渲染。那么在單頁應用中是如何監聽的變化呢，本文將總結一下，如何在單頁頁面中優雅的監聽的變化。在下幾章中，重點介紹一下如何監聽的改變。 ??單頁應用的原理從早起的根據url的hash變化，到根據H5的history的變化，實現無刷新條件下的頁面重新渲染。那么在單頁應用中是如何監聽url的變化呢，本文將總結一下，...

zhkai 2019-08-23 14:23 評論0 收藏0
歷史記錄API中hashchange與popstate的比較

摘要：與事件都是瀏覽器歷史記錄，兩者都是中的，相對而言比更為強大。事件本身只是監測的變化，我認為目前其主要意義就是與搭配使用從而使得在下歷史記錄前進后退按鈕依然有效。地址新的歷史記錄條目的地址。 hashchange與popstate事件都是瀏覽器歷史記錄API，兩者都是HTML5中的API，相對而言popstate比hashchange更為強大。注意這兩種歷史記錄管理都受同源策略的限制，這...

Yangder 2019-08-19 17:48 評論0 收藏0
使用history保存列表頁ajax請求的狀態

摘要：問題最近碰到兩個問題從首頁進入列表頁之后，點擊下一頁的時候，使用請求更新數據，然后點擊瀏覽器后退按鈕就直接返回到首頁，實際這里想要的效果是返回列表頁上一頁。沒法記住之前分頁狀態。問題最近碰到兩個問題：從首頁進入列表頁之后，點擊下一頁的時候，使用ajax請求更新數據，然后點擊瀏覽器后退按鈕就直接返回到首頁，實際這里想要的效果是返回列表頁上一頁。在列表頁分頁為2的頁面進入詳情頁，...

amuqiao 2019-08-22 13:53 評論0 收藏0