专栏首页leon的专栏IE条件注释,嗅探低版本IE用户,并引导升级

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Thinkphp的Common模块作用

    Common模块和普通模块一样,可以添加控制器、模型和视图,并且支持多层,但不能直接访问,只能继承,其中模型层 可以作为公用模型,在D方法实例化中调用。D...

    公众号php_pachong
  • 如何实现异步执行

    浏览器和服务器之间只一种面向无连接的HTTP协议进行通讯的,面向无连接的程序的特点是客户端请求服务端,服务端根据请求输出相应的程序,不能保持持久连接。

    公众号php_pachong
  • Laravel5.6博客中文章标签增删改查

    该命令会在 app 目录下创建模型文件 Tag.php,由于我们在 make:model 命令中使用了 --migration 选项,所以同时会创建 Tag 模...

    写PHP的老王
  • 实例化模型

    完成业务逻辑处理,包括对数据表的增删改查(CUED)操作。对处理的数据进行封装;对字段及属性进行验证;完成对象及属性的过滤等功能。Thinkphp模型类的命名规...

    公众号php_pachong
  • Web 开发会用到的20款优秀的开源工具

    很多的开源应用程序和工具都有很强的替代性。相对于其他昂贵的工具来说,开源工具兼容性比较好,并且他们是免费的。这样开发人员在进行日常的工作时便可以不花钱就可以获得...

    用户4962466
  • 前端开发规范

    省略外链资源(图片及其它媒体资源)URL 中的 http / https 协议,使 URL 成为相对地址

    公众号php_pachong
  • 看到全是十六进制的PHP代码文件?

    前几天在网上看到一份代码,打开来看,里面都是类似下面的十六进制字符串。一脸懵逼,啥情况,我万能的sublime text 打开居然是十六进制文件,而且文件居然还...

    写PHP的老王
  • Thinkphp入口文件和路由

    index.php => define('BIND_MODULE', 'index');

    公众号php_pachong
  • Yii2 VS thinkphp5.0

    Yii2.0使用一年多了,最近因为原来公司狗带了,换了公司,开始使用tp5.0。之前也有使用过tp3.2的框架,但是每次问及各个框架之前的区别的时候,总是不觉得...

    写PHP的老王
  • 利用thinkphp实现分页

    通常在数据查询后都会对数据集进行分页操作,ThinkPHP也提供了分页类来对数据分页提供支持。分页类目录:/Thinkphp/Library/Org/Bjy/P...

    公众号php_pachong

扫码关注云+社区

领取腾讯云代金券