zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    养花
    【bzoj1419】Red is good
    C++模板
    逆元求组合数
    【IOI2000】【洛谷1435】回文字串
    Centos 下启动mysql 报错: Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (111)解决方法
    linux系统下进行安装phpMyAdmin(基于Centos)
    达梦数据的安装(Windows10 、linux环境下、麒麟系统下)
    2020-3-3 链表刷题(203. 移除链表元素)
    2020-02-03 刷题
  • 原文地址:https://www.cnblogs.com/walls/p/6266591.html
Copyright © 2011-2022 走看看