IE条件注释，嗅探低版本IE用户，并引导升级
一、科普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>
完美解决！ _ Y
阅读原文：http://www.jianshu.com/p/0342c7ca3a15
IE条件注释，嗅探低版本IE用户，并引导升级的更多相关文章
- HTML条件注释判断浏览器版本命令
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![ ...
- 通过HTML条件注释判断IE版本的HTML语句详解<!--[if IE]> <![endif]-->
我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if ! ...
- 条件注释判断IE版本
在学习Bootstra的时候看到这么一句话, <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media ...
- 条件注释判断浏览器版本<!--[if lt IE 9]>
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![e ...
- 条件注释判断浏览器版本<!--[if lt IE 9]>（转载）
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![ ...
- html 条件注释判断浏览器版本<!--[if lt IE 9]>
<!--[if lte IE 8]><script>window.location.href='http://support.dmeng.net/upgrade-your-br ...
- zencart低版本由php5.2.17升级PHP5.3环境下错误及解决方案
方法:有错误或者空白先打开错误提示,ftp看cache错误日志 或者 面板查看错误日志,再对比数据库是否正确,可拿脚本看是否能连接 \cp -r backipmysql/nlbarb_007li/ ...
- 关于IE条件注释（译）
本文翻译自此篇文章.翻译纯属业余. 许多网站为了确保他们的站点能够在不同的浏览器上有不同的显示效果而使用特征检测,一些传统的网站使用其他技术,诸如在服务器或客户端上使用脚本去检测浏览器类型.在这里我们 ...
- HTML中的Hack手段之条件注释
通常WEB的好处就是可以跨平台,但这个世界偏偏有个另类,就是IE浏览器.在平常做HTML设计时,有时需要为IE的表示差异而不得不使用一些Hack手段.条件注释就是这类手段之一. 条件注释是IE浏览器的 ...
随机推荐
- C语言两个libxml2库使用的问题
最近使用libxml2想做点东西,翻看一些example后还是有些疑问,去segmentfault问了下,感谢@pingjiang的热心解答,问题解决,记录如下 (一)如下是一个XML文件,p为根结点 ...
- Visual Studio 2015 & C#6.0 试用报告，持续更新。
昨天早上看到了.net开源的消息,我是非常兴奋的,毕竟局限于Windows的.NET经常被人唾弃.VB暂且不提,C#常年被人指责跨平台性不佳,我也是无能为力.即使有Mono等第三方跨平台工程,.NET ...
- 【SSRS】入门篇(七) -- 报表发布
原文:[SSRS]入门篇(七) -- 报表发布 完成[SSRS]入门篇(六) -- 分组和总计后,第一份简单的报表就已完成了,下面把报表发布到报表服务器上. (实际情况下,报表展示给用户未必是用报表服 ...
- python进程池剖析（三）
之前文章对python中进程池的原理.数据流以及应用从代码角度做了简单的剖析,现在让我们回头看看标准库中对进程池的实现都有哪些值得我们学习的地方.我们知道,进程池内部由多个线程互相协作,向客户端提供可 ...
- Android项目---LayoutParams
LinearLayout.LayoutParams extends ViewGroup.MarginLayoutParams java.lang.Object ↳ android.view.Vi ...
- Smarty属性
Attributes [属性] 大多数函数都带有自己的属性以便于明确说明或者修改他们的行为. smarty函数的属性很像HTML中的属性. 静态数值不需要加引号,但是字符串建议使用引号. 如果用 ...
- ASP.NET MVC IOC之Unity攻略
ASP.NET MVC IOC之Unity攻略 一.你知道IOC与DI吗? 1.IOC(Inversion of Control )——控制反转 即依赖对象不在被依赖模块的类中直接通过new来获取 先 ...
- 使用ServletContext实现数据共享和获得web.xml中的参数
//适用于:很多文件需要初始化参数时,例如数据库账号和密码,不可能使用config这个对象,因为如果使用config对象去配置的话,那么每个servlet类都必须写一个参数,这时候就必须采用conte ...
- Role Object（角色对象）
Role Object(角色对象) 索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Role Object 的示例实现. 意图 通过明确地附加角色对象到目标对象中,以使对象可以 ...
- HttpClient 检索与获取过程数据
使用 HttpClient 检索与获取过程数据 对于System.Net.Http的学习(一)——System.Net.Http 简介 对于System.Net.Http的学习(二)——使用 Ht ...