背景

        5月23日微信更新6.6.7版本，新加的文章縮小浮窗功能確實很贊。不過，有一處更新頗使H5開發者感到困擾，就是在iPhone上H5頁面最底部多了一個白色的前進後退控制欄，即下圖底部的那個白條，

分析

        在微信裡只要發生頁面跳轉，這個控制瀏覽器前進後退的白色條就會出現。

        如果進入H5首頁每次都要微信授權來獲取使用者資訊，那這個白條將每次都會出現，因為oauth授權一定會有跳轉。第一次授權跳轉是無法避免的，那麼只要避免使用者進行二次授權，也就避免了白條的再次出現。所以，解決問題的關鍵點在於如何避免微信二次授權。

解決方法

        獲取使用者資訊方法

        實現思路是，引入cookie功能，建立一個儲存訪客微信使用者資訊的cookie。當用戶首次訪問時，通過oauth授權獲取使用者資訊，並存儲於cookie中。當用戶再次訪問時，判斷是否有相應cookie來調取使用者資訊，這樣就不會觸發二次授權。

        首先，定義建立和讀取cookie的函式，

      // 建立cookie
      function setCookie(c_name, value, expiredays){
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + expiredays);
        document.cookie = c_name+ "=" + escape(value) + 
        ((expiredays==null) ? "" : "; expires="+exdate.toGMTString());
      }
      // 讀取cookie
      function getCookie(c_name){ 
        if(document.cookie.length > 0){ 
          c_start = document.cookie.indexOf(c_name + "=");
          if(c_start != -1){ 
            c_start = c_start + c_name.length + 1 ;
            c_end = document.cookie.indexOf(";", c_start)
      
            if(c_end == -1){
              c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
          } 
        }
        return "";
      }
 

        然後，通過檢查是否有使用者資訊cookie值，來判斷是否要跳轉授權，

      var openid; // 使用者openid
      var nickname; // 使用者暱稱
      var headimgurl; //使用者頭像

      // 檢查cookie
      function checkCookie(){
        userinfo = getCookie('userinfo');
        
        if(userinfo != null && userinfo != "" && userinfo != "null,null,null"){ // 有相應cookie，讀取使用者資訊
          var strArr = userinfo.split(',');
          openid = strArr[0]; 
          nickname = strArr[1]; 
          headimgurl = strArr[2];

        }else{ // 沒有相應cookie，重新授權並寫入cookie
          openid = getUrlParam("openid"); 
          nickname = getUrlParam("nickname"); 
          headimgurl = getUrlParam("headimgurl");
          
          /* 
            此處為“跳轉授權，獲取使用者資訊程式碼”。上篇分享過，這裡省略... ...
          */

          var strInfo = openid + "," + nickname + "," + headimgurl;
          setCookie('userinfo', strInfo, 365); // 建立cookie，cookie的名稱、值以及過期天數。
        }
      }
 

Demo二維碼

參考連結