IE条件注释，嗅探低版本IE用户，并引导升级

大前端

2017-01-09

关注关注

一、科普IE条件注释

[blockquote]

IE条件注释功能是条件注释是IE特有的一种功能，能对IE系列产品进行单独的XHTML代码处理，注意，主要是针对XHTML,而非CSS。条件注释功能非常强大，可以进行true和false判断。

[/blockquote]

最大好处：IE条件注释属于微软官方给出的兼容解决办法而且还能通过W3C的效验。 *** 上个栗子：

<!--[if IE 8]> 
<link type="text/css" rel="stylesheet" href="my.css" />   
<![endif]-->

语句的意思是：IE8浏览器下，引入my.css文件。其他版本IE浏览器，if判断为flase，则不引入。 ***

关键词解释

[blockquote]

lt ：Less than的简写，小于。 lte ：Less than or equal to的简写，小于或等于。 gt ：Greater than的简写，大于。 gte：Greater than or equal to的简写，大于或等于。 !：不等于。

[/blockquote]

二、引导升级实现

1）嗅探低版本小于IE9的用户

<!--[if lt IE 9]>
 // IE浏览器版本低于IE9的用户
<![endif]-->

2）强制跳转页面的js

<script type="text/javascript">
    window.location.href = "http://"+ window.location.host +"/kill-IE.html";
</script>

3）双剑合并

<!--[if lt IE 9]>
  <script type="text/javascript">
    window.location.href = "http://"+ window.location.host +"/kill-IE.html";
  </script>
<![endif]-->

三、优化升级

kill-IE.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>kill-IE</title>
</head>
<body>
    <p>
        <span>推荐浏览器：
        <a href="https://www.baidu.com/s?wd=chrome" title="谷歌" target="_blank" >Google浏览器</a>
    </p>
</body>
</html>

在实际使用场景中，用户升级浏览器后，可能会复制kill-IE.html的链接进行第二次访问。这就带来一个问题：用户怎么刷新，还是停留在kill-IE.html这个页面。

解决方法：

kill-IE.html页面，判断当前浏览的是不是低版本浏览器，不是的话，自动跳转回访问之前的页面或者首页。 1)修改 window.location.href

<!--[if lt IE 9]>
  <script type="text/javascript">
    (function(){
        var _location = window.location;
        _location.href = "http://"+ _location.host +"/kill-IE.html?url="+ encodeURIComponent(_location.href);
    })();
  </script>
<![endif]-->

url记录跳转之前访问的页面 2)修改kill-IE.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>kill-IE</title>
<!--[if gte IE 9]>
  <script type="text/javascript">
    (function(){
        var _location = window.location, 
            _search = _location.search.substring(1), // url参数
            _jumpUrl = _location.host, // 主域名
            _params, // 参数集合
            _item, // 单个参数
            _result = "", // 最后得到的跳转url
            _len;
            
        // 抓取url参数
        if(_search.indexOf("url") != -1){
            _params = _search.split("&");
            _len = _params.length;
            
            while(_len){
             _len -= 1;
             _item = _params[_len];
             
             if(_item.indexOf("url=") != -1){
               result = _item.split("=")[1];
               if(result.length > 0){
                    _jumpUrl = result;
               }
               break;
             }
            }
            
        }
        
        _location.href = _jumpUrl; // 跳转页面
    })();
  </script>
<![endif]-->
</head>
<body>
    <p>
        <span>推荐浏览器：
        <a href="https://www.baidu.com/s?wd=chrome" title="谷歌" target="_blank" >Google浏览器</a>
    </p>
</body>
</html>