使用Chrome Frame插件解决IE浏览器兼容问题
大家好，又见面了，我是你们的朋友全栈君。
时不时碰到客户的浏览器为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">
<!--<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> </h2>
<h5> GoolgeChrome浏览器IE安装插件(可在IE下正常浏览)<span><a href="DownloadFile/GoogleChromeframeStandaloneEnterprise.4144293914.msi" target="_blank">下载</a></span></h5>
<h2 style="height:150px"> </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.cn/160301.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
