使用Chrome Frame插件解决IE浏览器兼容问题
生活随笔
收集整理的這篇文章主要介紹了
使用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
總結
以上是生活随笔為你收集整理的使用Chrome Frame插件解决IE浏览器兼容问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（1300）报错：无法加载文件
- 下一篇： 前端学习（1036）:bootstrap