解決火狐41無法識別webpack打包的react項目

問題原因:

firefox41 是es3環境, webpack通過babel將es6轉化爲es5,但是es3依舊識別不了。比如會報錯 include is not a function

解決方法:

根據瀏覽器版本動態引入polyfill.js,代碼如下

<script>
    /**
    * 動態加載JS
    * @param {string} url 腳本地址
    * @param {function} callback  回調函數
    */
    function dynamicLoadJs(url, callback) {
       var head = document.getElementsByTagName('head')[0];
       var script = document.createElement('script');
       script.type = 'text/javascript';
       script.src = url;
       if(typeof(callback)=='function'){
           script.onload = script.onreadystatechange = function () {
               if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete"){
                   callback();
                   script.onload = script.onreadystatechange = null;
               }
           };
       }
       head.appendChild(script);
   } 



   function getBroswer(){                                     //獲取瀏覽器和版本號
       var Sys = {};
       var ua = navigator.userAgent.toLowerCase();
       var s;
       (s = ua.match(/edge\/([\d.]+)/)) ? Sys.edge = s[1] :
       (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
       (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
       (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
       (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
       (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
       (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

       if (Sys.edge) return { broswer : "Edge", version : Sys.edge };
       if (Sys.ie) return { broswer : "IE", version : Sys.ie };
       if (Sys.firefox) return { broswer : "Firefox", version : Sys.firefox };
       if (Sys.chrome) return { broswer : "Chrome", version : Sys.chrome };
       if (Sys.opera) return { broswer : "Opera", version : Sys.opera };
       if (Sys.safari) return { broswer : "Safari", version : Sys.safari };
       
       return { broswer : "", version : "0" };
   }
     
   var abc = getBroswer();
   var version = parseInt(abc.version.split('.')[0], 10);
  // console.log(version)
   // console.log("broswer:"+abc.broswer+" version:"+abc.version);
   if ((abc.broswer == "IE") || (abc.broswer == "Edge")) { //IE瀏覽器跳轉提示頁面
     //let version = parseInt(abc.version.split('.')[0], 10);
     window.location.href = "./browserValidView.html";
   } else if (abc.broswer == "Chrome") {
     //const version = parseInt(abc.version.split('.')[0], 10); //谷歌/火狐瀏覽器版本較低時,也跳轉提示頁面
     if (version < 54) {
       window.location.href = "./browserValidView.html";
     }
   } else if (abc.broswer == "Firefox") {
     //const version = parseInt(abc.version.split('.')[0], 10);
    
     if (version < 41) {
       window.location.href = "./browserValidView.html";
       
     }
    
     if (version < 43) {
      // console.log("Firefox:"+version)
       dynamicLoadJs('./polyfill.min.js',function(){ dynamicLoadJs('./static/js/main.83e32de7.js')})  //引入Polyfill文件 並在回調里加載打包後的文件
     } 
   }
 </script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章