JS检测浏览内核弹出遮罩提示

忘是亡心i 2021-09-21 01:58 307阅读 0赞

<!DOCTYPE html>
    <html lang="cn">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>检测内核弹出遮罩</title>
      <link rel="icon" href="/favicon.png" type="image/x-icon">
      <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js"></script>
    </head>
    <script>
      // 检测用户浏览器
      var Sys = { };
      var ua = navigator.userAgent.toLowerCase();
      var s;
      (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
        (s = ua.match(/msie ([\d\.]+)/)) ? Sys.ie = s[1] :
          (s = ua.match(/edge\/([\d\.]+)/)) ? Sys.edge = s[1] :
            (s = ua.match(/firefox\/([\d\.]+)/)) ? Sys.firefox = s[1] :
              (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? Sys.opera = s[1] :
                (s = ua.match(/chrome\/([\d\.]+)/)) ? Sys.chrome = s[1] :
                  (s = ua.match(/version\/([\d\.]+).*safari/)) ? Sys.safari = s[1] : 0;
    
      // 查看内核信息
      console.log(Sys, 'Sys')
      // ie浏览器,
      if (Sys.ie) { 
    
    	// 弹出遮罩
        var html = document.getElementsByTagName('html')[0];
        html.style.height = 800 + 'px';
        html.style.overflow = 'hidden';
    
        document.write('<div style="padding: 150px;height: 100vh;">' +
          '<h2>你的浏览器版本太低，不能浏览本网站</h2>' + '<h2>请使用高级浏览器，<a href="https://www.google.cn/intl/zh-CN/chrome/" target="_blank">谷歌浏览器' +
          '</a>或 <a href="https://browser.360.cn/se/" target="_blank">360浏览器</a> ' +
          '等</h2>' + '<h3>（注：如您正在使用双核浏览器，请切换至高速/急速模式）</h3>' +
          '</div>');
    
      }
    </script>
    <body>
    <div id="root"></div>
    </body>
    </html>