知向前端
前端检测低版本浏览器并给予升级提示
2016-4-9 Jon


你有你的ie678,我有我的页面展现。你可以嘲笑我们的技术不去升级,我们会证明这是哪个浏览器的时代。前端,注定是踩坑的过程,但,那又怎样,哪怕所有人都用ie,也要坚持自己的方向。

在这个苦逼的浏览器国度里,既不能让所有人都用谷歌火狐,又不能强制别人升级浏览器,实属前端之痛。

判断浏览器低版本是,给予温馨的提示还是很不错的。

下面附上刚测试成功的代码,功能是判断浏览器是低版本(ie8及以下)时,顶部会给予提示,如下图






代码如下




<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>前端检测低版本浏览器并给予升级提示</title>

  <style>

    *{margin:0;padding:0;}

    body{font-family: "Microsoft YaHei"}

    a{

      text-decoration: none;

      color: #010101;

    }

    a:hover {text-decoration: none;color: #4e9bd5;}

    #upgrade{

      text-align:center;

      position: fixed;

      height: 30px;

      top: 0;

      width:100%;

      background: #FDF2D3;

      color: #333;

      font-size:12px;

      line-height:30px;

    }

    #close-upgrade{position: absolute;right:10px;top:0px;}

  </style>

  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>

  <h3>这是正常内容</h3>

  <h3>这是正常内容</h3>

  <h3>这是正常内容</h3>

  <h3>这是正常内容</h3>

  <script>

    $(function(){

      // ie8及以下浏览器顶部会出现提示

      if (!$.support.leadingWhitespace) {

        $('body').append('<div id="upgrade">您的浏览器版本过低。为保证最佳学习体验,<a href="http://cdn.dmeng.net/upgrade-your-browser.html" target="_blank">请更新或更换高版本浏览器</a><a href="javascript:;" id="close-upgrade">以后再说 X </a></div>');

      }

      // 浏览器升级按钮

      $('#close-upgrade').click(function(){

        $('#upgrade').slideUp(200);

      });

    });

  </script>

</body>

</html>




或者可以这样写




<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>前端检测低版本浏览器并给予升级提示</title>

  <style>

    *{margin:0;padding:0;}

    body{font-family: "Microsoft YaHei"}

    a{

      text-decoration: none;

      color: #010101;

    }

    a:hover {text-decoration: none;color: #4e9bd5;}

    #upgrade{

      text-align:center;

      position: fixed;

      height: 30px;

      top: 0;

      width:100%;

      background: #FDF2D3;

      color: #333;

      font-size:12px;

      line-height:30px;

    }

    #close-upgrade{position: absolute;right:10px;top:0px;}

  </style>

  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

  <!--[if lt IE 9]>

    <script>

      $(function(){

        // ie8及以下浏览器顶部会出现提示

        if (!$.support.leadingWhitespace) {

          $('body').append('<div id="upgrade">您的浏览器版本过低。为保证最佳学习体验,<a href="http://cdn.dmeng.net/upgrade-your-browser.html" target="_blank">请更新或更换高版本浏览器</a><a href="javascript:;" id="close-upgrade">以后再说 X </a></div>');

        }

        // 浏览器升级按钮

        $('#close-upgrade').click(function(){

          $('#upgrade').slideUp(200);

        });

      });

    </script>

  <![endif]-->

</head>

<body>

  <h3>这是正常内容</h3>

  <h3>这是正常内容</h3>

  <h3>这是正常内容</h3>

  <h3>这是正常内容</h3>

</body>

</html>




最简单粗暴的方法,直接跳转到浏览器升级页面







<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>前端检测低版本浏览器并给予升级提示</title>

  <!--[if lt IE 8]>

    <script>

      window.location.href='http://cdn.dmeng.net/upgrade-your-browser.html?referrer='+location.href;

    </script>

  <![endif]-->

</head>

<body>

  <h3>这是正常内容</h3>

  <h3>这是正常内容</h3>

  <h3>这是正常内容</h3>

  <h3>这是正常内容</h3>

</body>

</html>






评论:
xfrowxwem
2021-06-15 18:58 回复
ǰ
发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容