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

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

作者:互联网

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