发表于: 2020-04-02 23:42:17

1 1549


今天完成的事情:今天学习了用js判断浏览器的方法
明天计划的事情:继续学习js的技巧以及写一些实际例子
遇到的问题:Angular的内容还是要多加理解以及需要更多的实际练习
收获:今天学习了一下js的浏览器判断技巧

比如判断是否微信浏览器

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>

  <p>
    JavaScript 判断是否在微信浏览器中打开。
  </p>
  <hr>
  <script>
    function is_weixn() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
      } else {
        return false;
      }
    }

    if (is_weixn()) {
      document.write("微信浏览器")
    } else {
      document.write("其他浏览器")
    }
  </script>

</body>

</html>

运行结果

在电脑端打开就不是微信浏览器

同理可以判断移动端浏览器还是 PC 端浏览器。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>

  <p>
    JavaScript 判断当期设备是移动端浏览器还是 PC 端浏览器。
  </p>
  <hr>
  <hr>
  <script>
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
      document.write("移动")
    } else {
      document.write("PC")
    }
  </script>

</body>

</html>

运行结果

判断为pc

在精确一点可以判断浏览器的类型,例如

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <script>
    var Browser = new Object();
    Browser.isMozilla = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument != 'undefined');
    Browser.isIE = window.ActiveXObject ? true : false;
    Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox") != -1);
    Browser.isSafari = (navigator.userAgent.toLowerCase().indexOf("safari") != -1);
    Browser.isOpera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
    function check() {
      alert(Browser.isIE ? 'ie' : 'not ie');
      alert(Browser.isFirefox ? 'Firefox' : 'not Firefox');
      alert(Browser.isSafari ? 'Safari' : 'not Safari');
      alert(Browser.isOpera ? 'Opera' : 'not Opera');
    }
    window.onload = check
  </script>

</body>

</html>

运行结果

或者还有一种写法

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <script>
    function myBrowser() {
      var userAgent = navigator.userAgent//取得浏览器的userAgent字符串
      if (userAgent.indexOf("Opera") > -1) {
        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 nowBrowser = myBrowser();
    if ("IE" == nowBrowser) {
      alert("IE");
    }
    if ("FF" == nowBrowser) {
      alert("Firefox");
    }
    if ("Chrome" == nowBrowser) {
      alert("Chrome");
    }
    if ("Opera" == nowBrowser) {
      alert("Opera");
    }
    if ("Safari" == nowBrowser) {
      alert("Safari");
    }
  </script>

</body>

</html>

运行结果

直接判断处理是chrome

或者更简单一点

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <script type="text/javascript">
    function getOs() {
      var OsObject = "";
      if (isIE = navigator.userAgent.indexOf("MSIE") != -1) {
        return "MSIE";
      }
      if (isFirefox = navigator.userAgent.indexOf("Firefox") != -1) {
        return "Firefox";
      }
      if (isChrome = navigator.userAgent.indexOf("Chrome") != -1) {
        return "Chrome";
      }
      if (isSafari = navigator.userAgent.indexOf("Safari") != -1) {
        return "Safari";
      }
      if (isOpera = navigator.userAgent.indexOf("Opera") != -1) {
        return "Opera";
      }

    }
    alert("type -> " + getOs());

  </script>

</body>

</html>

运行结果

明天继续看Angular的内容


返回列表 返回列表
评论

    分享到