1. 程式人生 > >C# 開發Chrome核心瀏覽器(WebKit.net)

C# 開發Chrome核心瀏覽器(WebKit.net)

WebKit.net是對WebKit的.Net封裝,使用它.net程式可以非常方便的整合和使用webkit作為載入網頁的容器。這裡介紹一下怎麼用它來顯示一個網頁這樣的一個最簡單的功能。

第一步:

下載WebKit.net 的bin檔案。別小看這一步,你不一定能下載成功,原因你懂的。

第二步:

新建一個WindowsForms工程。

然後把下載好的webkit.net bin目錄下的所有檔案複製到新建工程的bin/Debug/目錄下。

新增引用,通過瀏覽新增對“WebKitBrowser.dll”的引用。

第三步:

來寫寫程式碼了。雙擊Form1的窗體進入程式碼,寫下這幾行程式碼:

 private void Form1_Load(object sender, EventArgs e)
        {
            WebKit.WebKitBrowser browser = new WebKitBrowser();
            browser.Dock = DockStyle.Fill;
            this.Controls.Add(browser);
            browser.Navigate("http://www.baidu.com");
        }

執行看看效果:

http://blog.csdn.net/xs1102

與IE核心的WebBrowser對比:

非常簡單的三步就完成了。可是話說回來了,時下都流行一步到位的,例如使用System.Windows.Forms.WebBrowser 。

使用.Net框架自帶的,呼叫IE核心的WebBrowser來顯示網頁也許更簡單些,只需要在新建的工程中寫下這麼幾行程式碼便可:

  private void Form1_Load(object sender, EventArgs e)
        {
            WebBrowser browser = new WebBrowser();
            browser.Dock = DockStyle.Fill;
            this.Controls.Add(browser);
            browser.Navigate("http://www.baidu.com");   
        }

執行起來的效果看起來差不多,肉眼基本只能看出字型稍微不同而已:

http://blog.csdn.net/xs1102

既然都差不多,那為什麼還不厭其煩的去下載幾個M的dll來顯示網頁呢?這是因為如果使用IE核心的WebBrowser我們無法預知對網頁的顯示效果,例如你的電腦是xp,可能會呼叫ie6作為載入器,如果是win7,可能會呼叫ie8作為載入器,而他們的顯示效果是不完全一樣的。下面用一個例子來看看。

 private void Form1_Load(object sender, EventArgs e)
        {
            WebBrowser browser = new WebBrowser();
            browser.Dock = DockStyle.Fill;
            browser.Navigate("http://css3.zxq.net/doraemon/doraemon_css3.html");
            splitContainer1.Panel1.Controls.Add(browser);

            WebKit.WebKitBrowser kitBrowser = new WebKitBrowser();
            kitBrowser.Dock = DockStyle.Fill;
            kitBrowser.Navigate("http://css3.zxq.net/doraemon/doraemon_css3.html");
            splitContainer1.Panel2.Controls.Add(kitBrowser);
        }

效果圖如下:

本機的系統是win7+IE9,但是通過WebBrowser呼叫,估計仍然使用的是IE8核心,所以顯示效果很差。

通過這樣左右對比,可以看出多了一步麻煩,是有必要的。

/***********************************************************************/

問:下載了一個第三方的核心瀏覽器外掛webkit.net(版本是2011),呼叫網頁中的js函式報錯:對 COM 元件的呼叫返回了錯誤 HRESULT E_FAIL,不知道是因為缺少檔案還是其他原因?webkit外掛怎麼呼叫網頁上的js函式呢?拜託各位

答:花費了一些時間算是解決了總結一下結論,方便他人。

當需要在客戶端顯示網頁時就要考慮用到瀏覽器外掛,一個是MS的webbrowser,另一個好用的是webkit核心的第三方外掛(webkit.net,google的open-webkit-sharp,做手機用的qtwebkit,Firefox的Geoko引擎的Windows Forms包裝),webbrowser基本上可以滿足需要,但是有一些問題不好解決,比如:IE6、7、8差異性大,使用者不同的機器安裝的IE核心不同,網頁的相容性,js指令碼,不支援html5元素的網頁等;令人開心的是老外分享有開源的第三方瀏覽器外掛(下載地址:http://sourceforge.net/projects/webkitdotnet/      一直沒有更新最新版本2011),webkit.net可以很好的解決了上面的問題,使用跟webbrowser一樣方便,提供的類方法也是很類似,減少學習成本可以很快的上手;其他的幾個外掛也是可以的,open-webkit-sharp目前更新版本3.0,完善和更新了bug,不過複雜的配置安裝過程,全英文的文件,網上也有很多這方便的資料,有時間的或者有必要可以選擇這個。

webkit.net呼叫js函式:

//webKitBrowser1.DocumentText =
// "<html><head><title>Test Page</title></head><body>" +
// "<p id=\"testelement\" style=\"color: red\">Hello, World!</p>" +
// "<div><p>A</p><p>B</p><p>C</p></div>" +
// "<script type=\"text/javascript\">" +
// "function f() { window.open('http://www.google.com', 'myWindow'); }</script>" +
// "</body></html>";
webKitBrowser1.IsScriptingEnabled = true;//啟用js函式呼叫
string str = webKitBrowser1.StringByEvaluatingJavaScriptFromString("Test()");//引數跟webbrowser有點不一樣,方法名加括號,測試時不要直接alert,好像沒顯示出來

兩句程式碼,js函式定義到需要呼叫的網頁裡面,或者直接嵌入一段js也可以,比如上面註釋的部分。

/**********************************************************************************/

有個專案要使用WebBroswer控制元件,並且要能傳遞一個js物件供前臺呼叫,用c#的WebBroswer控制元件很容易實現:

private void Form1_Load(object sender, EventArgs e)  
{  
    WebBrowser wb = new WebBrowser();                      
    wb.ObjectForScripting = new myClass();              
} 


要傳遞的js物件必須使用[ComVisibleAttribute]標記為COM 可見:

[System.Runtime.InteropServices.ComVisibleAttribute(true)]  
class myClass  
{  
    public void Test()  
    {  
        System.Windows.Forms.MessageBox.Show("alert:Test");  
    }  
}  

這樣前臺就能使用window.external呼叫myClass的方法: window.external.Test();

如果就這樣那就簡單了 ,可偏偏專案使用的網站對IE的相容性極差(吐槽下:個人覺得是IE太爛了,對標準的支援太差),無奈之下想找尋其他類似的WebBrowser控制元件,發現幾個不錯的替換控制元件:


本來決定使用GeokoFx,因為專案使用的網站用火狐開啟是很快的,但是我找了幾天資料也沒發現怎麼傳遞個js物件給控制元件,當發現Qt的webbroswer控制元件也是封裝的WebKit控制元件時,遂決定使用WebKit,但WebKit.NET也沒有直接提供傳遞物件的方法,後來發現又一個好東西:

下面的使用就非常簡單了,下載open-webkit-sharp後,把Core資料夾和References資料夾下所有檔案拷貝到你的工程目錄下,然後開啟你的專案,新增引用OpenWebKitSharp.dll和WebKit.Interop.dll(如果你的專案執行在.NET Framework 2.0 或 3.5 引用 Binary_NET2資料夾下的這兩個檔案,NET4.0的話就引用Binary資料夾下的這兩個dll);然後就是工具箱->選擇項->選擇OpenWebKitSharp.dll,然後從工具箱中把WebKitBrowser拖到你的窗體上.現在已經成功了一大步了,但是為了避免使用時遇到各種錯誤,我們需要先安裝兩個支援檔案:

Ready!開始傳遞物件:

private void Form1_Load(object sender, EventArgs e)  
{  
    this.webKitBrowser1.Navigate("http://yourWebSiteUrl");  
    this.webKitBrowser1.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(webKitBrowser1_DocumentCompleted);  
}  
void webKitBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)  
{  
    this.webKitBrowser1.GetScriptManager.ScriptObject = new myClass();  
}  

前臺呼叫方式類似IE的webbroswer,也使用window.external呼叫,你也可以自己定義一個物件:

this.webKitBrowser1.GetScriptManager.EvaluateScript("var obj=window.external;"); 

這樣呼叫的時候就能用你自己定義的物件名訪問了。

應該也有直接自己定義物件的方法,但是open-webkit-sharp中文的資料實在的不多,耐著性子看了幾天老外的論壇,一水的全是吐槽,實際解決問題的不多。等有更好的方法,也請大家不吝賜教。