zoukankan      html  css  js  c++  java
  • 如何给网站添加IE浏览器升级提示

    1.在代码编辑器中(如Notepad++)打开网站头部模板

    2.使用<!––[if IE]>语句添加升级提示,如:

    判断是否IE(包含使用IE内核的浏览器)

    <!––[if IE]>你正在使用的是IE浏览器<![endif]––>

    判断当前浏览器是否某个IE版本,以下例子是指等于IE6。如果我们要特指IE7则把 if IE 6 改成 if IE 7 即可,以此类推。

    <!––[if IE 6]>你使用的是IE6浏览器,这是IE的过期版本,是时候升级了!<![endif]––>

    判断当前浏览器是否IE浏览器以及小于等于某个版本,以下例子是指小于等于IE8。如果要指小于等于 IE 9 则把 if lte IE 8 改为 if lte IE 9 即可。

    <!--[if lte IE 8]>这段文字只会在IE8及(IE7/IE6/IE5等)以下版本显示<![endif]-->

    需要注意的是,if IE 语句只支持到 IE 9 ,要判断 IE10 需要使用JS语句。

    3.应用实例(使用方法:添加在网站头部代码</head>之前)

    IE8及以下版本提示升级

    <!--[if lte IE 8]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?referrer='+encodeURIComponent(window.location.href);</script><![endif]-->

    IE9及以下版本提示升级

    <!--[if lte IE 9]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?referrer='+encodeURIComponent(window.location.href);</script><![endif]-->

    IE10及以下版本提示升级(方法一,@cc_on 是 IE10 及更旧版IE特有的条件编译语句,因此可以用来判断是否除 IE11 的其他IE版本。推荐此方法,但需要注意,如使用自动过滤注释,要确认升级代码有没有被误删)

    <script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>

    IE10及以下版本提示升级(方法二,判断UA)

    <script>if (navigator.appVersion.match(/MSIE [0-9]+/)) window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); </script>

    4.值得注意的是,国产浏览器往往内置Chromium(即谷歌浏览器内核)和IE双内核,我们可以使用头部代码令其调用先进的Chromium内核,给用户更优质的访问效果。

    这个代码需要添加在IE升级代码前面,如下所示:

    <meta name="renderer" content="webkit"/>

    <meta name="force-rendering" content="webkit"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>

    升级提示弹窗代码

    上文介绍的代码是是跳转到浏览器升级提示页的代码,这并不能适用所有业务场景。例如有的网站以文字内容为主,虽然在旧版ie中内容错版,但是依然可以勉强浏览,针对这种情况,我们可以使用弹窗代码,实现在不跳出本站的前提下为用户提供浏览器升级提示。

    1.弹窗代码用法(将以下代码添加在 <head> 之后):

    在IE8及更旧版IE提示升级:

    <!--[if lte IE 8]> <script>var _iealwn = {once: 0, outver: 8};</script> <script id="_iealwn_js" src="//support.dmeng.net/ie-alert-warning/latest.js"></script> <![endif]-->

    在IE9及更旧版IE提示升级:

    <!--[if lte IE 9]> <script>var _iealwn = {once: 0, outver: 9};</script> <script id="_iealwn_js" src="//support.dmeng.net/ie-alert-warning/latest.js"></script> <![endif]-->

    在IE10及更旧版IE提示升级:

    <script>/*@cc_on document.write('x3Cscript id="_iealwn_js" src="//support.dmeng.net/ie-alert-warning/latest.js">x3C/script>'); @*/</script>

    一个完整的HTML示例:

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
        <meta charset="UTF-8"/>
    
        <meta name="renderer" content="webkit"/>
    
        <meta name="force-rendering" content="webkit"/>
    
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    
        <script>/*@cc_on document.write('x3Cscript id="_iealwn_js" src="//support.dmeng.net/ie-alert-warning/latest.js">x3C/script>'); @*/</script>
    
        <title>网页标题</title>
    
        <!-- 其他meta标签 -->
    
    </head>
    
    <body>
    
        <h1>网页内容</h1>
    
    </body>
    
    </html>

    案例二:讲以下代码放在<head> 之后

    <!--IE 9及以下升级提示-->
            <!--[if lte IE 9]>
                <script>
                    var str = "<p style='font-size:24px;;'>您的浏览器版本过低!</p>";
                    var str2 = "推荐使用:<a href='https://www.baidu.com/s?ie=UTF-8&wd=%E8%B0%B7%E6%AD%8C%E6%B5%8F%E8%A7%88%E5%99%A8' target='_blank' style='color:blue;'>谷歌</a>," +
                        "<a href='https://www.baidu.com/s?ie=UTF-8&wd=%E7%81%AB%E7%8B%90%E6%B5%8F%E8%A7%88%E5%99%A8' target='_blank' style='color:blue;'>火狐</a>," +
                        "其他双核极速模式";
                    document.writeln("<div style='text-align:center;color:#fff;background-color:#ccc; height:100%;border:0;position:fixed;top:0;left:0;100%;z-index:1234'>" +
                        "<h2 style='padding-top:200px;margin:0'><strong>" + str + "<br/></strong></h2><h2>" +
                        str2 + "</h2><h2 style='margin:0'><strong>如果你的使用的是双核浏览器,请切换到极速模式访问<br/></strong></h2></div>");
                    document.execCommand("Stop");
                </script>
            <![endif]-->

    参考:https://jingyan.baidu.com/article/39810a23e5f483b637fda642.html

  • 相关阅读:
    ngx_lua_waf
    一致性hash算法
    BloomFilter理解
    SkipList理解
    es中的一些知识点记录
    普通类、抽象类和接口区别:
    spring中的事件 applicationevent 讲的确实不错(转)
    CMS和G1的区别,以及Parallel
    SpringBoot优化内嵌的Tomcat ---设置MaxConnections
    tomcat启动nio,apr详解以及配置
  • 原文地址:https://www.cnblogs.com/flower-qh/p/10607395.html
Copyright © 2011-2022 走看看