首页 > 其他分享> > vue项目中如何做IE游览器的限制提示

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

2021-06-09 21:59:09 作者：互联网

背景：在做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