Vue judges the IE browser version and prompts

At first I felt very confused when I received this task. First let us dream back to 2016.
Insert picture description here

However, some people in the company use versions below IE11. You say magic is not magic?
I read several articles and searched a lot of codes. Now enter the topic: the
original code is placed in the <head> of public/index.html:

<script type="text/javascript">
      (function(window) {
          var theUA = window.navigator.userAgent.toLowerCase();
          if ((theUA.match(/msie\s\d+/) && theUA.match(/msie\s\d+/)[0]) || (theUA.match(/trident\s?\d+/) && theUA.match(/trident\s?\d+/)[0])) {
              var ieVersion = theUA.match(/msie\s\d+/)[0].match(/\d+/)[0] || theUA.match(/trident\s?\d+/)[0];
              if (ieVersion < 11) {
                  var str = "你的浏览器版本太low了,已经和时代脱轨了 :(";
                  var str2 = "推荐使用:<a href='https://www.baidu.com/s?ie=UTF-8&wd=%E8%B0%B7%E6%AD%8C%E6%B5%8F%E8%A7%88%E5%99%A8' target='_blank' style='color:blue;'>谷歌</a>,"
                      + "<a href='https://www.baidu.com/s?ie=UTF-8&wd=%E7%81%AB%E7%8B%90%E6%B5%8F%E8%A7%88%E5%99%A8' target='_blank' style='color:blue;'>火狐</a>,"
                      + "其他双核极速模式";
                  document.writeln("<pre style='text-align:center;color:#fff;background-color:#0cc; height:100%;border:0;position:fixed;top:0;left:0;width:100%;z-index:1234'>" +
                      "<h2 style='padding-top:200px;margin:0'><strong>" + str + "<br/></strong></h2><h2>" +
                      str2 + "</h2><h2 style='margin:0'><strong>如果你的使用的是双核浏览器,请切换到极速模式访问<br/></strong></h2></pre>");
                  document.execCommand("Stop"); 
              };
          }
      })(window);
       
</script>

Here navigator.userAgent is to obtain browser information, toLowerCase() changes all strings to lowercase. The following judgment conditions are not understood, and the code does not work, you can enter else after adding else later. So the following changes have been made.

<script type="text/javascript">
    (function(window) {
    
    
      var theUA = window.navigator.userAgent.toLowerCase();
      console.log(theUA);
      if (
        // theUA.indexOf('trident') > -1 && theUA.indexOf('rv:11.0') > -1
        theUA.indexOf("compatible") > -1 && theUA.indexOf("msie") > -1
      ) {
    
    
          var str = "你的浏览器版本不受支持，请及时更新";
          var str2 = "推荐使用:<a style='color:#fff;'>谷歌</a>,"
            + "<a style='color:#fff;'>搜狗</a>,"
            + "其他双核极速模式";
            document.writeln("<pre style='text-align:center;color:#fff;background-color:#1890FF; height:100%;border:0;position:fixed;top:0;left:0;width:100%;z-index:1234'>" +
            "<h2 style='padding-top:200px;margin:0'><strong>" + str + "<br/></strong></h2><h2>" +
            str2 + "");
            console.log("浏览器不合格")
          document.execCommand("Stop");
        }
      else{
    
    
          console.log("浏览器合格")
        }
    })(window);
  </script>

The code mainly changes the judgment condition in if, theUA.indexOf('trident')> -1 && theUA.indexOf('rv:11.0')> -1, it is judged whether it is IE11,
theUA.indexOf("compatible ”)> -1 && theUA.indexOf("msie")> -1, it is judged whether it is the version below ie11. In addition, you can output console.log to
view browser information.

There are other completion codes in the blog, not involved

Vue judges the IE browser version and prompts

Guess you like