一、科普IE条件注释

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

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

上个栗子：

  1. <!--[if IE 8]>
  2. <link type="text/css" rel="stylesheet" href="my.css" />
  3. <![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. <!--[if lt IE 9]>
  2.  // IE浏览器版本低于IE9的用户
  3. <![endif]-->

2）强制跳转页面的js

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

3）双剑合并

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

三、优化升级

在实际使用场景中，用户升级浏览器后，可能会复制kill-IE.html的页面url进行第二次访问。

 这就带来一个问题：用户怎么刷新，还是停留在kill-IE.html这个页面。

kill-IE.html

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  6. <title>kill-IE</title>
  7. </head>
  8. <body>
  9. 	<p>
  10. 		<span>推荐浏览器：</span>
  11. 		<a href="https://www.baidu.com/s?wd=chrome" title="谷歌" target="_blank" >Google浏览器</a>
  12. 	</p>
  13. </body>
  14. </html>

解决方法：

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

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

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

  1. <!--[if lt IE 9]>
  2.   <script type="text/javascript">
  3. 	(function(){
  4. 		var _location = window.location;
  5. 		_location.href = "http://"+ _location.host +"/kill-IE.html?url="+ encodeURIComponent(_location.href);
  6. 	})();
  7.   </script>
  8. <![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. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  6. <title>kill-IE</title>
  7. <script>
  8.   var isGoodBrowser = true; // 默认标记为现代浏览器
  9. </script>
  10. <!--[if ltIE 9]>
  11. <script>
  12.   isGoodBrowser = false; // 标记为需要升级的低版本浏览器
  13. </script>
  14. <![endif]-->
  15. <script type="text/javascript">
  16.   (function(){
  17.     // 如果是低级版本浏览器，则不进行重定向跳转
  18.     if(!isGoodBrowser){
  19.       return;
  20.     }
  22.     var _location = window.location,
  23.       _search = _location.search.substring(1), // url参数
  24.       _jumpUrl = "http://"+_location.host, // 主域名
  25.       _params, // 参数集合
  26.       _item, // 单个参数
  27.       _result = "", // 最后得到的跳转url
  28.       _len;
  30.     // 抓取url参数
  31.     if(_search.indexOf("url") != -1){
  32.       _params = _search.split("&");
  33.       _len = _params.length;
  35.       while(_len){
  36.        _len -= 1;
  37.        _item = _params[_len];
  39.        if(_item.indexOf("url=") != -1){
  40.          result = _item.split("=")[1];
  41.          if(result.length > 0){
  42.           _jumpUrl = decodeURIComponent(result); // 转义回普通字符
  43.          }
  44.          break;
  45.        }
  46.       }
  48.     }
  50.     _location.href = _jumpUrl; // 跳转页面
  51.   })();
  52. </script>
  54. </head>
  55. <body>
  56.   <p>
  57.     <span>推荐浏览器：</span>
  58.     <a href="https://www.baidu.com/s?wd=chrome" title="谷歌" target="_blank" >Google浏览器</a>
  59.   </p>
  60. </body>
  61. </html>

完美解决！ _ Y

阅读原文：http://www.jianshu.com/p/0342c7ca3a15

IE条件注释，嗅探低版本IE用户，并引导升级的更多相关文章

  1. HTML条件注释判断浏览器版本命令

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![ ...

  2. 通过HTML条件注释判断IE版本的HTML语句详解<!--[if IE]> <![endif]-->

    我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if ! ...

  3. 条件注释判断IE版本

    在学习Bootstra的时候看到这么一句话, <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media ...

  4. 条件注释判断浏览器版本<!--[if lt IE 9]>

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![e ...

  5. 条件注释判断浏览器版本<!--[if lt IE 9]>（转载）

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![ ...

  6. html 条件注释判断浏览器版本<!--[if lt IE 9]>

    <!--[if lte IE 8]><script>window.location.href='http://support.dmeng.net/upgrade-your-br ...

  7. zencart低版本由php5.2.17升级PHP5.3环境下错误及解决方案

    方法:有错误或者空白先打开错误提示,ftp看cache错误日志 或者 面板查看错误日志,再对比数据库是否正确,可拿脚本看是否能连接 \cp -r  backipmysql/nlbarb_007li/ ...

  8. 关于IE条件注释（译）

    本文翻译自此篇文章.翻译纯属业余. 许多网站为了确保他们的站点能够在不同的浏览器上有不同的显示效果而使用特征检测,一些传统的网站使用其他技术,诸如在服务器或客户端上使用脚本去检测浏览器类型.在这里我们 ...

  9. HTML中的Hack手段之条件注释

    通常WEB的好处就是可以跨平台,但这个世界偏偏有个另类,就是IE浏览器.在平常做HTML设计时,有时需要为IE的表示差异而不得不使用一些Hack手段.条件注释就是这类手段之一. 条件注释是IE浏览器的 ...

随机推荐

  1. IntelliJ IDEA 发布13版本——创造java奇迹

    IntelliJ IDEA被公认为业界最好的Java开发平台.此次发布的了13版本,更是集合了与Java EE.Android.Spring.Scala和Gradle最新合作与支持. Java EE  ...

  2. 附加没有LDF的数据库文件

    原文:附加没有LDF的数据库文件 如果你只下载了数据文件,没有LDF文件,那么附加的时候选择使用ATTACH_REBUILD_LOG. 命令类似: USE [master] GO CREATE DAT ...

  3. 如何让Fortran生成不同的随机数

    用Fortran生成随机数的方法很简单,就是: call random_seed ()call random_number (rd) 生成随机数组可以这样: do k = 1,10 call rand ...

  4. 你是否听过 TypeScript？

    Type入门(JavaScript的超集)-译   你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口. ...

  5. c#中如何跨线程调用windows窗体控件？

    我们在做winform应用的时候,大部分情况下都会碰到使用多线程控制界面上控件信息的问题.然而我们并不能用传统方法来做这个问题,下面我将详细的介绍.首先来看传统方法: public partial c ...

  6. CentOS6.8安装JDK1.7

    一.查看当前系统是否自带JDK rpm -qa | grep java tzdata-java-2016c-1.el6.noarch java-1.7.0-openjdk-1.7.0.99-2.6.5 ...

  7. Django模板引擎的研究

    Django模板引擎的研究 原创博文,转载请注明出处. 以前曾遇到过错误Reverse for ‘*’ with arguments '()' and keyword arguments' not f ...

  8. MVC 5显示、创建、编辑、删除等功能实练

    MVC 5显示.创建.编辑.删除等功能实练 在前天的学习小结中<15天学习MVC后的小结(分享经历与想法)>http://www.cnblogs.com/insus/p/3369870.h ...

  9. django restul webservice返回json数据

    做这个demo的前提是你已经配好了python ,django ,djangorestframwork(在我的上一篇博客中有介绍,大家也可以google),mysql-python等. djangor ...

  10. 使用STL处理分支限界法处理最优装载问题

    使用STL处理分支限界法处理最优装载问题 #include <iostream>#include <vector>#include <queue>#include ...