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

2017-01-10 08:18:36来源:cnblogs.com作者:wall's人点击

一、科普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

<!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的链接进行第二次访问。
 这就带来一个问题:用户怎么刷新,还是停留在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>推荐浏览器:</span>        <a href="https://www.baidu.com/s?wd=chrome" title="谷歌" target="_blank" >Google浏览器</a>    </p></body></html>

完美解决! ^_^ Y

原文入口: http://www.jianshu.com/p/0342c7ca3a15


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台