1. 全栈程序员必看首页

使用Chrome Frame插件解决IE浏览器兼容问题

全栈程序员-站长 • • 未分类 • 阅读 12

使用Chrome Frame插件解决IE浏览器兼容问题时不时碰到客户的浏览器为IE7,IE8，甚至IE6的，他们不能升级浏览器，因为升级后，机器中其它的重要系统无法访问。而新系统的前端又需要浏览器的支持，比如H5，SVG等等，换框架结构，成本无疑是巨大的，而且风险不可控。针对此种情况，安装GoogleFrame是相对非常完美的解决方案，不要求升级浏览器，只安装一个插件，且对原系统无任何干扰，新系统也可根据情况对是否使用GoogleFrame插件进…

大家好，又见面了，我是你们的朋友全栈君。

时不时碰到客户的浏览器为IE7,IE8，甚至IE6的，他们不能升级浏览器，因为升级后，机器中其它的重要系统无法访问。而新系统的前端又需要浏览器的支持，比如H5，SVG等等，换框架结构，成本无疑是巨大的，而且风险不可控。针对此种情况，安装Google Frame是相对非常完美的解决方案，不要求升级浏览器，只安装一个插件，且对原系统无任何干扰，新系统也可根据情况对是否使用Google Frame插件进行切换。

建立文件default.html

注意head中加入

    <meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″>
表示此页面使用Chrome引擎，当然<meta http-equiv=”X-UA-Compatible” content=”IE=Edge“>则是不使用Chrome引擎。

以下完全代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>IE-google兼容测试</title>
    <!--  
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
      -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="bootstrap/css/components.css" id="style_components" rel="stylesheet" />
</head>
<body>
    <div class="page-container">

        <!-- BEGIN CONTENT -->
        <div class="page-content-wrapper">
            <div class="page-content" style="margin-left: 0 !important;">

                <!-- BEGIN DASHBOARD STATS -->
                <div class="row">
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">
                        <div class="dashboard-stat red-intense">
                            <div class="visual">
                                <i class="icon-fire"></i>
                            </div>
                            <div class="details">
                                <div class="number">
                                    16255
                                </div>
                                <div class="desc">
                                    机组1
                                </div>
                            </div>
                            <a class="more" href="javascript:showMapModeal('index_md')">详细 <i class="m-icon-swapright m-icon-white"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">
                        <div class="dashboard-stat purple-plum">
                            <div class="visual">
                                <i class="icon-support"></i>
                            </div>
                            <div class="details">
                                <div class="number">
                                    12 MW
                                </div>
                                <div class="desc">
                                    机组2
                                </div>
                            </div>
                            <a class="more" href="javascript:showMapModeal('index_rq')">详细 <i class="m-icon-swapright m-icon-white"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">
                        <div class="dashboard-stat blue-madison">
                            <div class="visual">
                                <i class="icon-drop"></i>
                            </div>
                            <div class="details">
                                <div class="number">
                                    79.04 MW
                                </div>
                                <div class="desc">
                                    机组3
                                </div>
                            </div>
                            <a class="more" href="javascript:showMapModeal('index_sd')">详细 <i class="m-icon-swapright m-icon-white"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">
                        <div class="dashboard-stat green-jungle">
                            <div class="visual">
                                <i class="icon-flag"></i>
                            </div>
                            <div class="details">
                                <div class="number">
                                    197.25 MW
                                </div>
                                <div class="desc">
                                    机组4
                                </div>
                            </div>
                            <a class="more" href="javascript:showMapModeal('index_fd')">详细 <i class="m-icon-swapright m-icon-white"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">
                        <div class="dashboard-stat yellow-gold">
                            <div class="visual">
                                <i class="icon-energy"></i>
                            </div>
                            <div class="details">
                                <div class="number">
                                    48 MW
                                </div>
                                <div class="desc">
                                    机组5
                                </div>
                            </div>
                            <a class="more" href="javascript:showMapModeal('index_gf')">详细 <i class="m-icon-swapright m-icon-white"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">
                        <div class="dashboard-stat blue-dark">
                            <div class="visual">
                                <i class="icon-pie-chart"></i>
                            </div>
                            <div class="details">
                                <div class="number">
                                    129.29 MW
                                </div>
                                <div class="desc">
                                    接入总装机
                                </div>
                            </div>
                            <a class="more" href="#" style="cursor: default">&nbsp;
                                <!--<i class="m-icon-swapright m-icon-white"></i>-->
                            </a>
                        </div>
                    </div>
                </div>
                <!-- END DASHBOARD STATS -->
                <div class="clearfix">
                </div>
            </div>
        </div>
        <!-- END CONTENT -->
        <!-- BEGIN QUICK SIDEBAR -->
        <a href="#" class="page-quick-sidebar-toggler"><i class="icon-close"></i></a>

        <!-- END QUICK SIDEBAR -->
        <div id="placeholder"></div>
    </div>
</body>
<!-- END BODY -->
 <script type="text/javascript" src="js/CFInstall.min.js"></script> 
 <script type="text/javascript">
     window.attachEvent("onload", function ()
     {
         //alert('sfds');
         CFInstall.check({
             mode: "overlay",//
             url: "Downfile.html",
             destination: "Default.html"
         });
     });
 </script>
</html>

注意结尾javascript

window.attachEvent(“onload”, function ()
     {

         //alert(‘sfds’);
         CFInstall.check({

             mode: “overlay”,//
             url: “Downfile.html”,
             destination: “Default.html”
         });
     });

表示页面加载完成后，判断是否安装了Google Frame插件，参数说明：

  • mode: “inline” 默认值，GCF安装引导的iframe结构将存在于node选项指定id的元素中最前面位置，属于文档流的一部分
  • mode: “overlay” 该iframe以弹出层显示，弹出层将会在页面可视范围内居中
  • mode: “popup” 该iframe以新开窗口/选项卡显示，类似于target:_blank的效果
  • node: “” 指定iframe结构的dom结点位置，在mode:”inline”下有效
  • url: “” 点击安装按钮跳转到的链接地址，默认为GCF安装文件地址
  • destination: “” GCF安装完成后页面跳转到的链接地址
  • className: “” 在mode:”inline”下对iframe指定新的class名，美化iframe界面时很有用，默认的class为chromeFrameInstallDefaultStyle

实例中的实现，如果没有安装则弹出层iframe页面地址为”Downfile.html“，安装完成后，跳转到页面”Default.html”。

Downfile.html则写了简单的下载链接地址，代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>文件下载</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <!-- END THEME STYLES -->
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>
    <!-- BEGIN HEADER -->
    <script src="js/HeaderWithNothing.js"></script>
    <!-- END HEADER -->
<!--    <div class="clearfix">
    </div>-->

        <!--This is the START of the recent posts-->
        <div class="page-content-wrapper" >
            <div class="page-content" style="margin-left: 0 !important;">
            <h2>&nbsp;</h2>
            <h5>&nbsp;&nbsp;GoolgeChrome浏览器IE安装插件(可在IE下正常浏览)<span><a href="DownloadFile/GoogleChromeframeStandaloneEnterprise.4144293914.msi" target="_blank">下载</a></span></h5>
            <h2 style="height:150px">&nbsp;</h2>
            </div>            
        </div>    
    <!--END of content-->

    <!-- BEGIN FOOTER -->
    <script src="js/Footer.js"></script>
    <!-- END FOOTER -->
</body>
<!-- END BODY -->
</html>

以下资源包括CFInstall.min.js，GoogleChromeframeStandaloneEnterprise.4144293914.msi    实例用例一则

下载相关资源：https://download.csdn.net/download/youyou390/10788762

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/160301.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • 高级java面试题及答案_java高级面试题大汇总

    高级java面试题及答案_java高级面试题大汇总

    高级java面试题及答案_java高级面试题大汇总一、参考资料不容错过的Java高级面试题_帝都的雁的博客-CSDN博客_java高级面试题java面试题汇总(上)_Oliverfly1的博客-CSDN博客_java面试题史上最全的中高级JAVA工程师面试题汇总有哪些？-知乎DevBooks:2021面试题，Java面试题、JVM面试题、多线程面试题、并发编程、设计模式面试题、SpringBoot面试题、SpringCloud面试题、MyBatis面试题-Gitee.com2021年Java高级面试题总结_m0_57699

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月20日
    8
  • npm和cnpm安装

    npm和cnpm安装

    npm和cnpm安装npm和cnpm安装1.npm安装（1）去nodejs官网下载：http://nodejs.cn/download/（2）安装到目录C:\ProgramFiles\nodejs下（3）打开命令提示符窗口，window+R，输入cmd命令行输入npm-v如果报错，就打开控制面板-系统和安全-系统中打开高级系统配置，把nodejs的安装目录添加到环境变量中，例如我的就是C:\Prog…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月15日
    0
  • Lua五:”collectgarbage”、 弱引用table、析构器「建议收藏」

    Lua五:”collectgarbage”、 弱引用table、析构器「建议收藏」

    Lua五:”collectgarbage”、 弱引用table、析构器「建议收藏」Lua具有自动内存回收机制，但是垃圾收集器只能回收那些它认为是垃圾的东西，不会回收那些用户认为是垃圾的东西。比如将一个对象放在一个数组中但没有用时，它就无法被回收，这是因为即使当前没有其他地方在使用它

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月4日
    29
  • rabbitmq使用mqtt协议[通俗易懂]

    rabbitmq使用mqtt协议[通俗易懂]

    rabbitmq使用mqtt协议[通俗易懂]提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、rabbitmq是什么？二、mqtt协议是什么？三、使用步骤1.引入库2.读入数据总结前言在网上学习物联网，发现有人可以用springboot+rabbitmq可以搭建物联网（IOT）平台，rabbitmq不是消息队列吗，原来rabbitmq有两种协议，消息队列是用的AMQP协议，而用在智能硬件中的是MQTT协议。一、rabbitmq是什么？示例：pandas是基于NumPy的一种工具，该工具是为了解

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月3日
    0
  • unittest 测试框架

    unittest 测试框架

    unittest 测试框架一、unittest测试框架1、测试固件1.1setUp（）1.2tearDown（）2、unittest基本使用3、测试套件（suit）3.1测试用例执行顺序3.2忽略测试用例的执行4、断言5、HTML报告生成5.1测试报告5.2异常捕捉与错误截图5.2.1错误截图：get_scunittest是python的单元测试框架，unittest单元测试提供了创建测试用例，测试套件以及批量执行的方案。作为单元测试的框架，unittest也是可以对程序最小

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月15日
    0
  • C#自定义特性实例

    C#自定义特性实例

    元数据,就是C#中封装的一些类,无法修改.类成员的特性被称为元数据中的注释.1、什么是特性（1）属性与特性的区别属性(Property)：属性是面向对象思想里所说的封装在类里面的数据字段，Get

    全栈程序员-站长的头像 全栈程序员-站长
    2021年12月24日
    52

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号