vue页面浏览器判断

Question

vue写的页面，ie等其他浏览器都兼容性不好。 如何在打开首页面时判断浏览器，提示用户使用chrome浏览器访问?谢谢！

Answer 1

    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {
        return "Opera"
    }; //判断是否Opera浏览器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器
    if (userAgent.indexOf("Chrome") > -1){
  return "Chrome";
 }
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } //判断是否Safari浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    }; //判断是否IE浏览器
}

//以下是调用上面的函数
var mb = myBrowser();
if ("IE" == mb) {
    alert("我是 IE");
    
    // 在这里给出提示
}

Answer 2

index.html 页面

<!--[if IE]>
<script>
//....你要执行的代码 是想alert 还是跳转提示页面什么的自己定
</script>
<![endif]-->

Answer 3

html 部分：
 <p v-if="isShowChromeTip" style="color: red;font-size: 15px; margin-top: -30px;text-align:center">请务必使用Chrome浏览器打开【<a target="_blank" href="https://www.baidu.com/link?url=AAazRp3jmfLLZ4bMb1jamhnrWvxDBE3D5-P0NA6YIKM9e0XTc3kUvA7kJK6OdK7S3T_jFDV2VTTsvKnGB6DDto3CfN5FDBEJfFTgkXBu2DS&wd=&eqid=a35565a60002e3ea000000035a13f001">点击下载</a>】</p>



script部分
 computed: {
    isShowChromeTip() {
      const USER_AGENT = navigator.userAgent.toLowerCase()
      const isChrome = /.*(chrome)\/([\w.]+).*/
      return !isChrome.test(USER_AGENT)
    }
  }

Answer 4

或者加上该加的polyfill

App.vue里面:

<script>
import "babel-polyfill";
export default {
  name: "app"
};
</script>

Answer 5

参阅MDN文档：例子_1：检测浏览器并返回浏览器名称字符串

var sBrowser, sUsrAg = navigator.userAgent;

// The order matters here, and this may report false positives for unlisted browsers.

if (sUsrAg.indexOf("Firefox") > -1) {
  sBrowser = "Mozilla Firefox";
  // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
} else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {
  sBrowser = "Opera";
  //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
} else if (sUsrAg.indexOf("Trident") > -1) {
  sBrowser = "Microsoft Internet Explorer";
  // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
} else if (sUsrAg.indexOf("Edge") > -1) {
  sBrowser = "Microsoft Edge";
  // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
} else if (sUsrAg.indexOf("Chrome") > -1) {
  sBrowser = "Google Chrome or Chromium";
  // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
} else if (sUsrAg.indexOf("Safari") > -1) {
  sBrowser = "Apple Safari";
  // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
} else {
  sBrowser = "unknown";
}

alert("当前浏览器为: " + sBrowser);