IE條件注釋，嗅探低版本IE用戶，并引導升級 - walls－IT工程師數位筆記本

文章出處

一、科普IE條件注釋

IE條件注釋功能是條件注釋是IE特有的一種功能，能對IE系列產品進行單獨的XHTML代碼處理，注意，主要是針對XHTML,而非CSS。條件注釋功能非常強大，可以進行true和false判斷。

最大好處：IE條件注釋屬于微軟官方給出的兼容解決辦法而且還能通過W3C的效驗。
***
上個栗子：

<!--[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的用戶

<!--[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的頁面url進行第二次訪問。
這就帶來一個問題：用戶怎么刷新，還是停留在kill-IE.html這個頁面。

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>推薦瀏覽器：</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作為一個參數值，添加在跳轉鏈接上

<!--[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

<!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>