Ios、Android微信瀏覽器後退跳轉實現，及遇到的bug

1、需求背景

• 一、當前頁有一個彈窗，當用戶瀏覽器後退的時候不但願直接退出，而是將當前彈窗進行關閉，留在當前頁
• 二、用戶進入當前頁點擊瀏覽器後退的時候不但願用戶直接退出，使用瀏覽器後退跳轉到其它頁面，增長流量

2、功能實現

使用瀏覽器API window.history 進行後退控制，須要瀏覽器支持history(大部分移動瀏覽器都支持了) 代碼示例：

// 添加瀏覽器歷史紀錄
history.pushState('test', '', '')
複製代碼

// 監聽瀏覽器後退事件
window.onpopstate = function (e) {
  // 這裏進行業務邏輯的處理
  location.href = 'c.html'
}
複製代碼

這樣在頁面加載的時候添加入新的瀏覽器紀錄就能夠在後退的時候觸發 popState 事件，而後處理你的業務邏輯

3、遇到的BUG

• 一、history.pushState在當前頁面刷新一次頁面就會添加一次，當屢次刷新的時候會將history的長度加長，須要使用一個存儲變量進行判斷是否須要添加歷史紀錄，顯然H5新接口sessionStorage很適合當前使用，這樣在跳轉到後退頁面以後在使用瀏覽器後退會返回到當前頁，因爲使用了判斷是當前頁再也不進行歷史壓棧，就不會在從新觸發popState事件了，避免了無限次瀏覽器後退無限循環。

let active_view = sessionStorage.getItem('active_view')
if (!active_view) {
  sessionStorage.setItem('active_view', 'has')
}
複製代碼

• 二、Ios微信瀏覽器popstate的bug，在當前A.html頁跳轉到b.html頁，而後再b.html頁經過瀏覽器返回按鈕回到a.html頁面的時候會直接觸發popState事件，直接跳轉到c.html頁面了，真實需求是再b.html返回的時候回到a.html頁面，而後在a.html頁面的後退的時候才進行跳轉c.html頁面。因此我將Ios和Android區分開來，分別進行不一樣的業務處理。

// 判斷ios 的時候在第二次返回才進行頁面跳轉，不是的在從新將history增長
let jumps: any = sessionStorage.getItem('jump_number') || 0;
    let count = parseInt(jumps) + 1;
    let u = navigator.userAgent;
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    sessionStorage.setItem('jump_number', count);
    if (isIOS) {
      if (count >= 2) {
        // ios
        setJump();
      } else {
        pushHistory();
      }
    } else {
      // 其它
      setJump();
    }
複製代碼

參考了 IOS微信瀏覽器返回事件popstate監聽

• 三、頁面跳轉問題，在微信瀏覽器中直接使用location.href = c.html有可能頁面不會替換，其實顯示的仍是a.html,須要點擊刷新頁面纔是c.html，因此封裝了一個跳轉函數，加上一段打印log就能夠正常跳轉了

// 須要將url打印出來頁面跳轉纔會正常，（發稿以前還未弄清楚是什麼緣由，之後知道了在附上）
function setJump(url) {
  // 跳轉
  console.log('連接：' + url);
  window.location.href = url;
}
複製代碼

• 四、當使用history.pushState(state, "test", "#")添加參數的時候，若是當前頁面的url中有#號，就是最後一個參數和url中最後的字符相同，會破壞popState事件，可能致使不觸發，所以使用參數加入歷史的須要注意投放連接的url，Android 手機部分機型在此狀況下點擊瀏覽器後退也會觸發兩次popState事件

// push 瀏覽器歷史記錄
function pushHistory() {
  let state = {
    title: "test",
    url: "#"
  };
  window.history.pushState(state, "test", "#")
}
複製代碼

總結

• 一、H5 頁面須要在不少平臺進行運行，有些是微信、支付寶內置瀏覽器的問題，也有不少是手機平臺的問題，須要兼允許多機型和平臺的問題，比較複雜還有更多的平臺兼容問題須要去處理。
• 二、不一樣平臺對於window的API有一些差別，許多BUG都是該差別引發的，因此在遇到的時候多查查資料就能夠了。

開發環境的問題

• 一、大多數前端同窗都是使用谷歌瀏覽器做爲開發瀏覽器的。新版的谷歌瀏覽器點擊後退按鈕不會觸發popState事件，須要在控制檯打印history.length在點擊後退按鈕纔會觸發（還不知道這個緣由是什麼）