与我联系

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

2016-4-9 一诺 js+jquery+ajax

你有你的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>


标签: 兼容 浏览器

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 @2015 勿恨水长东
qq:1614245331 邮箱:13515678147@163.com Powered by
emlog