一、科普IE条件注释

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

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

 上个栗子：

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

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

关键词解释

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

二、引导升级实现

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

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

2）强制跳转页面的js

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

3）双剑合并

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

三、优化升级

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

kill-IE.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>推荐浏览器：</span>
		<a href="https://www.baidu.com/s?wd=chrome" title="谷歌" target="_blank" >Google浏览器</a>
	</p>
</body>
</html>

 

解决方法：

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

1)记录跳转kill-IE.html之前，所在页面的url

 将url作为一个参数值，添加在跳转链接上

1
2
3
4
5
6
7
8
<!--[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]-->

 
2)修改kill-IE.html
 修改kill-IE.html的处理逻辑，增加判断当前浏览器是否为低版本浏览器，如果不是低版本的浏览器，则不需要停留在当前页面。

 跳转重定向解决方式：
 获取当前href的url参数。
 如果有，则进行跳转。
 没有该参数，则默认跳转回主域名。

 在线演示：https://wall-wxk.github.io/blogDemo/2017/01/20/kill-IE.html
 模拟访问来源是百度：https://wall-wxk.github.io/blogDemo/2017/01/20/kill-IE.html?url=http%3A%2F%2Fwww.baidu.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>kill-IE</title>
<script>
  var isGoodBrowser = true; // 默认标记为现代浏览器
</script>
<!--[if ltIE 9]>
<script>
  isGoodBrowser = false; // 标记为需要升级的低版本浏览器
</script>
<![endif]-->
<script type="text/javascript">
  (function(){
    // 如果是低级版本浏览器，则不进行重定向跳转
    if(!isGoodBrowser){
      return;
    }

    var _location = window.location, 
      _search = _location.search.substring(1), // url参数
      _jumpUrl = "http://"+_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 = decodeURIComponent(result); // 转义回普通字符
         }
         break;
       }
      }
      
    }
    
    _location.href = _jumpUrl; // 跳转页面
  })();
</script>

</head>
<body>
  <p>
    <span>推荐浏览器：</span>
    <a href="https://www.baidu.com/s?wd=chrome" title="谷歌" target="_blank" >Google浏览器</a>
  </p>
</body>
</html>

完美解决！ ^_^ Y