IE条件注释,嗅探低版本IE用户,并引导升级
2017-01-20 16:24
447 查看
每一个程序员对于IE的版本判定方式都不同,这是我自己写的一种,如果能对你有点用,那就请把它完整的看完。
最大好处:IE条件注释 属于微软官方给出的兼容解决办法而且还能通过W3C的效验。
***
上个栗子:
语句的意思是:IE8浏览器下,引入my.css文件。其他版本IE浏览器,if判断为flase,则不引入。
***
lte :Less than or equal to的简写,小于或等于。
gt :Greater than的简写,大于。
gte:Greater than or equal to的简写,大于或等于。
!:不等于。
这就带来一个问题:用户怎么刷新,还是停留在kill-IE.html这个页面。
kill-IE.html
1)记录跳转kill-IE.html之前,所在页面的url
将url作为一个参数值,添加在跳转链接上
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
一、科普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>