使用Chrome Frame,彻底解决浏览器兼容问题

52java 发布于 2013/01/31 15:53
阅读 21K+
收藏 8

使用Chrome Frame技术开发者小指南(转)

本文转自http://www.ryanbay.com/?p=269,感谢该作者的总结

个人觉得本文很有意义,对于ie一直存在的兼容问题给予一个解决办法,可以考虑在工作中使用。

以下是正文,为方便oser阅读,原文抄录如下,有关具体情况请参考原作者。

Google Chrome Frame,谷歌浏览器内嵌框架(简称GCF),是一个使你机器上的Internet Explorer系列浏览器鸟枪换炮,用上webkit内核的Chrome引擎,但IE浏览器外观上还是IE的外观的免费插件。

不相信吗?使用用IE浏览器打开GCF安装页,按照提示安装后,重启IE,再打开gcf:about:version,现在你会看到chrome浏览器的内核信息,说明Chrome内核已经植根于你的IE浏览器上了。

但并非你的IE访问任意网页就会自动的使用Chrome内核来解析,需要两种方式:一是在网址前面加上”gcf:“,比如gcf:http://gmail.com来访问;二是在网页的meta信息中加入一句:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

这里chrome=1代表所有版本的IE浏览器都使用Chrome内核解析网页,chrome属性还有其他的值,比如chrome=IE7,代表IE7或以下版本的浏览器才使用chrome内核,chrome=IE6chrome=IE8等依此类推。

作为一个网页开发者,你会不会想到有了这个插件,以后就可以大胆使用各种CSS3样式,只要Chrome下显示正确,IE下也能显示正确了!没错!但前提是用户会安装这个插件吗?如何提供一个友好的引导安装界面呢,Google帮我们解决了这个问题。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> <div id="prompt"></div> <script> window.attachEvent("onload", function() { CFInstall.check({ mode: "overlay", node: "prompt" }); }); </script>

在body标签中加入这段js代码,可以使得IE打开该网页时出现友好的GCF安装引导iframe框。这段代码不需要存在于

<!--[if IE]>...<![endif]-->

之中,js中已经做了浏览器的判断。

CFInstall.min.js是官方提供的文件,CFInstall.check()方法有许多可选项,其中包括:

  • 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

OK,了解了这么多,相信你已经跃跃欲试了,我在我的博客上开启了chrome=IE8并加上了GCF的友好安装指引,欢迎访问比较IE下和Chrome下的渲染差异。

更多GCF的参考资料:

加载中
0
52java
52java
看本篇文档,本人认为应该可以解决前段浏览器兼容问题。之所以有本文,是想得知前段兄弟们,有没有使用过这个方法的实际例子,以及效果怎样?
0
灰花走湿
灰花走湿
呵呵,这下IE有点小生气了
javasql
javasql
ie不思或者不想进取,给了谷歌机会。
灰花走湿
灰花走湿
谷歌想慢慢侵蚀IE浏览器的市场份额
0
灰花走湿
灰花走湿
我有个疑问,此核心的网银插件应该不行吧,请教下
灰花走湿
灰花走湿
哦,学习了,呵呵,
52java
52java
应该可以使用,ie还是ie,只是显示用的是webkit的内核。网银是采用activex插件的机制吧,因此应该可以使用
0
星星爷
星星爷
被题目闹蒙了
星星爷
星星爷
回复 @52java : 看明白了 :)
52java
52java
抱歉,标题党了一会儿,主要是想让更多人参与讨论,题目起得有点故弄玄虚了。
0
javasql
javasql
不错的方式,值得推荐。
0
景愿
景愿
这个厉害了,把js引擎换掉了,还保留了ie 的插件功能!
0
东晓
东晓
被题目闹蒙了
返回顶部
顶部