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

时间：2022-10-31 23:15:05

一、科普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用户，并引导升级的更多相关文章

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

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

  2. 通过HTML条件注释判断IE版本的HTML语句详解&lt&semi;&excl;--&lbrack;if IE&rsqb;&gt&semi; &lt&semi;&excl;&lbrack;endif&rsqb;--&gt&semi;

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

  3. 条件注释判断IE版本

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

  4. 条件注释判断浏览器版本&lt&semi;&excl;--&lbrack;if lt IE 9&rsqb;&gt&semi;

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

  5. 条件注释判断浏览器版本&lt&semi;&excl;--&lbrack;if lt IE 9&rsqb;&gt&semi;（转载）

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

  6. html 条件注释判断浏览器版本&lt&semi;&excl;--&lbrack;if lt IE 9&rsqb;&gt&semi;

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

  7. zencart低版本由php5&period;2&period;17升级PHP5&period;3环境下错误及解决方案

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

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

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

  9. HTML中的IE条件注释，让低版本IE也能正常运行HTML5&plus;CSS3网站的3种解决方案

    最近的项目中,因为需要兼容IE7,IE8,IE9,解研究了IE的条件注释,顺手写下来备忘.  HTML中的IE条件注释 IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解. ...

随机推荐

  1. 图解修改mysql的默认数据库存放目录

    按照下图三步完成:

  2. 安装ntp

    #yum -y install ntp#service ntpd restart#vi /etc/ntp.confserver 0.aisa.pool.ntp.org iburstserver 1.a ...

  3. 换个角度理解云计算之HDFS

    学习云计算,必然得了解Hadoop,而Hadoop中的HDFS(分布式文件系统)是一个基础,接下来就写一下我所理解的HDFS. 有一个很有特别的村庄,村庄里面有一个很牛逼的人,叫做“大哥”,村民们都信 ...

  4. Hello 畅连&&num;183&semi;西瓜 帮助与更新

    无感认证很好用,软件不再更新, 感谢每一位朋友的陪伴,谢谢! (2016.12.15) 百度云:点击下载 ------------旧版更新日志------------- Hello 畅连·西瓜 官网: ...

  5. UIView 与 CALayer

    联系: 1. UIView 有个属性 layer,可以返回它的主 CALayer 实例:CALayer *layer = myView.layer 2. 一个 UIView 可以有多个 CALayer ...

  6. Free Pascal的IDE界面乱码解决方法

    右击[Free Pascal]快捷图标,选[属性] [属性]窗口中,选择[选项]页,下拉[当前代码页(C)],选择[437 (美国)] 按[确定] 注意:[开始]菜单和桌面中的快捷图标都得设置.

  7. ASP&period;NET WEB API回发到客户端消息体的格式化

    首先基于SOA的消息通信基本都是按照一个统一的协议规范进行交互,那么必须定义消息体.不同的交互结构设计了不同的消息体. 业界统一使用的SOAP是一种规范的XML消息内容.例如在WCF中返回的结果. 随 ...

  8. Ubuntu版本更替所引发的&OpenCurlyDoubleQuote;血案”

    Ubuntu版本更替所引发的"血案"       今天,我兴致很高的装了双系统,并且配置了Linux的网络,接下来就是安装一些软件,来实现我想达到的功能了,结果被一个小小的命令卡的 ...

  9. springboot&plus;mybatis&plus;pagehelper

    springboot+mybatis+pagehelper整合 springboot   版本2.1.2.RELEASE mybatis  版本3.5 pagehelper 版本5.18 支持在map ...

  10. CircleList-使用UGUI实现的圆形列表

    CircleList CircleList是一个通过UGUI实现的圆形列表,通过缩放.平移和层级的改变模拟一个3D的圆形列表. 效果 添加与旋转 间距调整 椭圆形的旋转 参数 CenterX: 椭圆圆 ...

相关文章