VueはIEブラウザのバージョンを判断してプロンプトを表示します

この仕事を受けたとき、最初はとても戸惑いました。まず、2016年を夢見てみましょう。
ここに画像の説明を挿入

ただし、社内の一部の人はIE11より前のバージョンを使用しています。あなたは魔法は魔法ではないと言いますか？
私はいくつかの記事を読み、たくさんのコードを検索しました。ここでトピックを入力します。
元のコードはpublic / index.htmlの<head>に配置されます。

<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>

ここで、navigator.userAgentはブラウザ情報を取得するためのものであり、toLowerCase（）はすべての文字列を小文字に変更します。以下の判定条件がわからず、コードが機能しない場合は、後でelseを追加してからelseを入力できます。そのため、以下の変更が行われました。

<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>

コードは主に、UA.indexOf（ 'trident'）> -1 && theUA.indexOf（ 'rv：11.0'）> -1の場合に判断条件を変更し、IE11、
theUA.indexOf（ "互換性があるかどうかを判断します。 ”）> -1 && theUA.indexOf（ "msie"）> -1、ie11以下のバージョンかどうかを判断します。さらに、console.logを出力して、
ブラウザー情報を表示できます。

ブログには他にも完了コードがありますが、関係ありません

VueはIEブラウザのバージョンを判断してプロンプトを表示します

おすすめ