IE内嵌google chrome frame解决浏览器兼容问题

简介:

参考文献:

http://www.pseudowired.com/2012/12/04/tomcat-http-header-manipulation/(html中自动添加使用chrome的header)

http://www.baike.com/wiki/Google+Chrome+Frame(google chrome frame介绍)

http://www.cnblogs.com/Libra/archive/2009/03/24/1420731.html

项目背景:

我们的项目中使用了highcharts和svg相关的内容,所以要求至少要IE9才可以,或者使用firefox、chrome等其他浏览器。但是客户是国企,他们使用的都是windows自带的浏览器,普遍是IE7和IE8,有些甚至还是windows xp自带的IE6,让人倍感崩溃。

当时建议客户升级IE版本,升级到至少IE9,但是他们的OA系统支持只IE7跟IE8,这样的事情还真有,我自己公司就是这样子。所以升级的提议被否决。

然后建议客户下载chrome浏览器,但是客户说他们很多人都是访问不了外网的,而且领导们都懒得下载浏览器,太麻烦。

无奈执行我就只能选择以下的解决方案

解决方案:

浏览器判断

在web页面上做浏览器判断,如果浏览器版本低于<=IE8,那么就跳转页面,转到下载chrome浏览器或者下载google chrome frame的页面

复制代码
<script type="text/javascript">
$(document).ready(function(){
    var bro=$.browser;
    var binfo="";
    if(bro.msie) 
    {
        binfo= "Microsoft Internet Explorer " +bro.version;
        if(eval(parseInt($.browser.version))<9)
        {
              // alert(binfo);
               location.href='./browser.html'
        }          
    }
    if(bro.mozilla) 
    {
        binfo= "Mozilla Firefox "+bro.version;
    }
    if(bro.safari)
    {
        binfo= "Apple Safari "+bro.version;
    }
    if(bro.opera) 
    {
        binfo= "Opera "+bro.version;
    }
   //alert(binfo);
})

</script>
复制代码

google chrome frame的介绍

在文献2种我们可以大体知道google chrome frame是个什么东西。Google Chrome Frame,官方的正式中文名称为“谷歌浏览器内嵌框架”。Google Chrome Frame是Google推出的一款免费的Internet Explorer专用插件。使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式浏览网页。在运行插件之后,IE浏览器将获得Chrome的性能和功能。它将使用Chrome的WebKit 引擎处理网页,另外也支持IE所没有的HTML5等其他技术。

其实是一种挂羊头(IE)卖狗肉(Chrome)的东西,或者说是披着羊皮的狼。但是我们就是需要这匹狼来给我们解决问题。

但是我们在安装完这个插件以后发现,我们使用IE浏览器打开我们的网页,还是给我跳转到下载浏览器界面,我在首页上面使用alter调试,判断当前浏览器发现还是IE8。后来知道如果要是IE启用chrome核心有两种方法:(文献2中有介绍)

  1. 修改注册表,从此以后IE全部使用chrome核心。(与业务需求不符合,客户还指望着使用IE8去访问他们的OA呢)
  2. 在web页面上面添加类似于X-UA-Compatible的标签,主动让IE使用调用chrome核心。(这正是我们当前需要的)
<meta http-equiv="X-UA-Compatible" content="chrome=1">

根据修改,我在自己的web页面上面添加了一下内容,其含义如下:如果当前浏览器版本是<=IE8的,那么给我使用chrome,如果不是,则使用IE。

 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">

urlrewritefilter的使用

欢欢欣欣做完以上内容,我想这样我就可以访问自己的网站的了把,可是悲哀的发现,只有首页是使用chrome核心的,其他没有加X-UA-Compatible标签的页面还是使用IE核心。这尼玛太蛋疼了,难道让我找出出所有html页面,然后一个一个手动加上去,这样的事情是人干的吗?想着肯定有人跟我一样碰到同样坑爹的事情,所以就google搜索了一下,最后找到了文献1。看到老外形容IE浏览器的词,suck,fuck,shit,就能看出他是多恨IE了。按照该作者的介绍,我知道了urlrewritefilter,来到他的官方网站,跟着教程去一步一步执行。ok,最后解决问题了。

这个东西的整体思路就是,不管你是发request还是response请求,最后他都会在你的请求页上面加上你设定的内容,我这里设定的内容就是 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">

最后google chrome frame这个东西到2014年就不再官方支持了,官方推荐我们下载最新的google浏览器。不过我想应该不会影响使用。

 

本文转自xwdreamer博客园博客,原文链接:http://www.cnblogs.com/xwdreamer/p/3477776.html,如需转载请自行联系原作者

目录
相关文章
|
9月前
|
Web App开发 人工智能 JSON
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
AutoMouser是一款Chrome扩展程序,能够实时跟踪用户交互行为,并基于OpenAI的GPT模型自动生成Selenium测试代码,简化自动化测试流程。
535 17
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
12月前
|
Web App开发 JSON 安全
Chrome浏览器的跨域问题
【10月更文挑战第6天】
1809 123
|
Web App开发 存储 前端开发
Chrome浏览器的跨域问题
Chrome浏览器的跨域问题
809 128
|
9月前
|
Web App开发 数据采集 JavaScript
Chrome浏览器实例的TypeScript自动化脚本
Chrome浏览器实例的TypeScript自动化脚本
|
11月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
1236 9
|
11月前
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
2815 2
|
11月前
|
Web App开发 Linux iOS开发
Chrome浏览器如何导出所有书签并导入书签
【11月更文挑战第4天】本文介绍了如何在 Chrome 浏览器中导出和导入书签。导出时,打开书签管理器,点击“整理”按钮选择“导出书签”,保存为 HTML 文件。导入时,同样打开书签管理器,点击“整理”按钮选择“导入书签”,选择之前导出的 HTML 文件即可。其他主流浏览器也支持导入这种格式的书签文件。
8356 2
|
12月前
|
Web App开发 开发者
|
12月前
|
JavaScript 前端开发

推荐镜像

更多