解决火狐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>

猜你喜欢

转载自blog.csdn.net/weixin_42052388/article/details/80593686