Vue项目在ie浏览器中显示白屏优化提示

原创于 2024-01-10 11:23:21 发布 · 652 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #vue.js #js

文章讲述了在Vue开发中遇到的在IE低版本浏览器下页面空白的问题，通过检测用户代理字符串并提供兼容性提示，鼓励用户升级到现代浏览器如Chrome。

在工作中用到Vue开发项目，用户在IE浏览器打开页面，结果显示空白屏。作为开发者当然知道是浏览器版本过低导致语法不支持，但是用户不知情的情况下显示空白屏就很不友好。这时候有必要在页面上做点提示语告诉用户切换浏览器，下面是页面效果：

代码实现：

关键代码：

<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 = "你的浏览器版本太低了，已经和时代脱轨了！";

                  var str2 = "推荐使用:谷歌（Chrome）浏览器";

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

                  document.execCommand("Stop");

              };

          }

      })(window);

    </script>