vue项目中如何做IE游览器的限制提示

2021-06-09 21:59:09 阅读：319 来源： 互联网

标签：vue bind 游览器 ua 报错 prototype IE match

背景：在做vue项目的时候，因为IE9以下的版本，不支持es6的语法，所以在vue中的js无法运行，打开页面显示白屏，控制台会报错。(SCRIPT438：对象不支持"bind"属性或方法/app.js(915,11))。

前言：开始看控制台有js报错，首先先尝试解决报错问题，后来发现解决了bind报错，又出现其他语法不支持。看来这不是一个解决问题的好方法。

附：解决bind不支持的问题：

因为游览器没有提供这个参数的方法，就自己写一个bind，让这个参数生效。

// 解决IE10以下不支持Function.bind
if (!Function.prototype.bind){
    Function.prototype.bind = function(oThis) {
        if (typeof this !== "function"){
            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
        }
        var aArgs = Array.prototype.slice.call(arguments,1),
            fToBind = this,
            fNop = function() {},
            fBound = function() {
                return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
                    aArgs.concat(Array.prototype.slice.call(arguments));
            );
        fNOP.prototype = this.prototype;
        fBound.prototype = new fNOP();
        return fBound;
      };
    }
}

后来，转念一想，提示是在登陆页面，但是加载到app.js就有报错，导致无法加载到登陆页面。那么，我们如果在index.html主页面，就判断游览器的版本，给出提示，那么即使不加载到登陆页面，也能实现相应的效果呢？

实现思路：在index.html页面，先和app保持同级，新建一个弹框提示的图片，先用display:none;属性不加载dom节点，进行隐藏；在js中通过判断游览器的版本，在IE10以下，让display:block属性让图片显示出来。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= webpackConfig.name %></title>
  </head>
 
  <body>
    <div id="app"></div>
    <div id="ieBg" style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 998;display: none;background-color: rgba(0, 0, 0, 0.3);">
      <img src="./bg.png" alt="">
    </div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    // ie10版本以下的提示
   (function () {
     console.log(navigator);
     var ua = navigator.userAgent.toLocaleLowerCase();
     var browserType = "", browserVersion = "";
     if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
       browserType = "IE";
       browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];
       if ((1 * browserVersion) < 10) {
         //ie10以下版本浏览器
         var obj = document.getElementById("ieBg");
         obj.style.display= "block";
       }
     }
   })();
   </script>
</html>

实现效果如下：

参考博客：解决IE10以下对象不支持“bind”属性或方法 https://www.cnblogs.com/inkyi/p/5647317.html

vue项目上如何做ie游览器的限制的提示 https://blog.csdn.net/qq_35859392/article/details/112387185

JS如何判断游览器类型和详细区分IE各版本游览器 https://www.jb51.net/article/107428.htm

标签：vue,bind,游览器,ua,报错,prototype,IE,match
来源： https://blog.csdn.net/qq_26780317/article/details/117754515

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue项目中如何做IE游览器的限制提示