Visual Studio 中提供了瀏覽器控制元件 WebBrowser, 可以用在 WinForm 中充當一個小型的瀏覽器.


WebBrowser 本身提供了呼叫頁面中 js 函式的方法, 但沒有直接提供可以新增執行新的 js 指令碼的功能. 如果有如下的 js 函式:

1 <script type="text/javascript">2 function add(num1, num2) {
3 return num1 + num2;
4     }
5 </script>

則, 通過如下程式碼即可呼叫 add 函式:

1 // browser 為視窗上的 WebBrowser 控制元件.
 
2 this.browser.Document.InvokeScript ( "add", new object[] { 1, 2 } );

 

IEBrowser 提供在 WebBrowser 的頁面中新增執行新 js 指令碼的功能.


IEBrowser 是開源共享的 C# 程式碼, 示例參考: http://code.google.com/p/zsharedcode/wiki/IEBrowserDoc , 下載使用: http://code.google.com/p/zsharedcode/wiki/Download .


下面的例子是增加並呼叫新的 js 函式 showMessage:

 1 // 從當前的 WebBrowser 控制元件建立 IEBrowser 物件, WebBrowser 的 Url 屬性已經設定為 "about:blank".
 
 2 IEBrowser ie = new IEBrowser ( this.webBrowser );
 3 
 4  // 定義 javascript 指令碼, 宣告一個 showMessage 函式. 5 string showMessageScript = "function showMessage(message){alert("訊息:" + message);}";
 6  // 將指令碼安裝到 WebBrowser 中. 7 ie.InstallScript ( showMessageScript );
 8 
 9  // 執行指令碼, 呼叫 showMessage 函式.10 ie.ExecuteScript ( "
 
showMessage("哈哈!");" );

使用 IEBrowser 的 InstallScript 方法即可完成新增 js 指令碼的功能, 而 ExecuteScript 則可以執行 js 指令碼. InstallScript 除了可以直接傳遞包含指令碼的字串外, 也可以是指令碼的地址.



你還可以為 WebBrowser 安裝 jQuery, 並執行一系列的 jQuery 指令碼.


IEBrowser 提供了一個 JQuery 類, 簡化了 jQuery 指令碼的書寫.



下面的示例, 演示了在 Google 頁面安裝 jQuery, 並使用 jQuery 獲取頁面上所有的連結.

 1 // 從當前的 WebBrowser 控制元件建立 IEBrowser 物件. 2 IEBrowser ie = new IEBrowser ( this.webBrowser );
 3 
 4  // 導航到頁面 http://www.google.com.hk/. 5 ie.Navigate ( "http://www.google.com.hk/" );
 6 
 7  // 等待頁面載入完畢. 8 ie.IEFlow.Wait ( new UrlCondition ( "wait", "http://www.google.com.hk", StringCompareMode.StartWith ) );
 9 
10  // 安裝跟蹤指令碼, 執行 jquery 必需.11 ie.InstallTrace ( );
12 
13  // 安裝本地的 jquery 指令碼.14 ie.InstallJQuery ( new Uri ( Path.Combine ( AppDomain.CurrentDomain.BaseDirectory, @"jquery-1.5.min.js" ) ) );
15 
16  // 執行 jquery 指令碼 $("*").length, 獲得頁面上總元素個數.17 Console.WriteLine ( "頁面上共有 {0} 個元素", ie.ExecuteJQuery ( JQuery.Create ( ""*"" ).Length ( ) ) );
18 
19  // 執行 jquery 指令碼 $("a"), 獲得頁面上所有的 a 元素並將結果儲存在 __jAs 變數中.20 ie.ExecuteJQuery ( JQuery.Create ( ""a"" ), "__jAs" );
21 
22  // 得到 __jAs 變數中包含的 a 元素的個數.23 int count = ie.ExecuteJQuery<int> ( JQuery.Create ( "__jAs" ).Length ( ) );
24 
25  for ( int index = 0; index < count; index++ )
26 {
27     // 得到 __jAs 變數中索引為 index 的 a 元素, 並儲存在 __jA 變數中.28     ie.ExecuteJQuery ( JQuery.Create ( "__jAs" ).Eq ( index.ToString ( ) ), "__jA" );
29 
30     // 輸出 a 元素的 innerText 和 href 屬性.31     Console.WriteLine ( string.Format (
32         "a[{0}], "{1}", "{2}"",
33         index,
34         ie.ExecuteJQuery<string> ( JQuery.Create ( "__jA" ).Text ( ) ),
35         ie.ExecuteJQuery<string> ( JQuery.Create ( "__jA" ).Attr ( ""href"" ) )
36         )
37         );
38 }

呼叫 IEBrowser 的 InstallTrace 和 InstallJQuery 即可安裝 jQuery 指令碼, 指令碼的位置可以在本地或者網路. 之後, 可以配合 ExecuteJQuery 方法和 JQuery 類在頁面上完成各種 jQuery 操作. JQuery 類參照 jQuery 的 js 指令碼命名, 很容易掌握.



注意: 如果出現 jQuery 指令碼編碼格式導致的出錯, 可以將 jQuery 指令碼作為資源匯入專案, 然後使用 InstallScript 方法安裝即可.



除了以上功能, IEBrowser 還可以複製圖片, 使 js 呼叫託管程式碼, 以及記錄使用者操作和完成複雜的流程控制等, 之後文章會說明.