使用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=IE6和chrome=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下的渲染差異。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/29519108/viewspace-2144988/，如需轉載，請註明出處，否則將追究法律責任。