WebBrowser（IE） 與 JS 相互調用
在開發中我們經常將WebBrowser控件嵌入Winform 程序來瀏覽網頁，既然是網頁那麽少不了JS。下面就讓我們來說說他們兩之間的相互調用。
在C#封裝的瀏覽器內核中，Chromium 內核封裝有Xilium.Cefglue、Cefsharp，Webkit 內核封裝 Webkit.Net 、OpenWebKitSharp等。
但是說到和JS的調用，不得不說還是IE 的WebBrowser 最為簡單方便。至於IE 為啥方便而其他的不方便，以後我會寫文章分析。
下面我們還是先看看WebBrowser怎麽和JS交互把：
WebBrowser 執行JS 代碼
如果腳本已經存在於網頁中，我們可以使用 InvokeScript 方法
public object InvokeScript(string scriptName)
public object InvokeScript(string scriptName,object[] args)
下面是一個簡單例子：
[html] view plain copy
- <HTML>
- <HEAD>
- <TITLE>Invoke Script Sample</TITLE>
- <SCRIPT>
- //無參數調用
- function alertNull(){
- alert("WebBrowser call!");
- }
- //有參數調用
- function callWithPar(name, address) {
- alert("Name is " + name + "; address is " + address);
- }
- //返回字符串
- function returnString() {
- return("This is a test.");
- }
- //返回對象
- function returnScriptObject() {
- return(new(MyObject));
- }
- function MyObject() {
- this.Data = "Data for my private object.";
- }
- </SCRIPT>
- </HEAD>
- <BODY>
- <DIV id="div1">
- </DIV>
- </BODY>
- </HTML>
[csharp] view plain copy
- private void button2_Click(object sender, EventArgs e)
- {
- string name = "dai";
- string address = "123";
- if (webBrowser1.Document != null)
- {
- HtmlDocument doc = webBrowser1.Document;
- //無參調用
- doc.InvokeScript("alertNull");
- Object[] objArray = new Object[2];
- objArray[0] = (Object)name;
- objArray[1] = (Object)address;
- //有參調用
- doc.InvokeScript("callWithPar", objArray);
- //返回字符串
- String str = doc.InvokeScript("returnString").ToString();
- MessageBox.Show(str);
- //返回對象
- Object jscriptObj = doc.InvokeScript("returnScriptObject");
- MessageBox.Show(jscriptObj.ToString());
- }
- }
如果網頁中不存在目標腳本，我們也可以創建腳本再執行。
[csharp] view plain copy
- HtmlElement ele = webBrowser1.Document.CreateElement("script");
- ele.SetAttribute("type", "text/javascript");
- ele.SetAttribute("text", "alert(‘new script‘)");
- webBrowser1.Document.Body.AppendChild(ele);
相當於更改Html 的DOM結構，在<Body>標簽後添加<Script>標簽，程序加載最後會執行text 中的JS代碼。
JS 調用 C# 方法
接下來，我們來說說今天的重點，在JS中怎麽調用C# 提供的方法。
public object ObjectForScripting {
get;
[SecurityCriticalAttribute]
set;
}
public 類的實例的 Object，由主機應用程序實現且可由寄宿文檔的腳本訪問。
有了這個方法，調用C#方法就很簡單，只需要在C#中聲明一個C#對象，然後再設置 this.webBrowser1.ObjectForScripting = new JSObject(); 就OK了。
記得要在JSObject 類上面聲明 [System.Runtime.InteropServices.ComVisible(true)] 才能使對象可見。
設置完了之後，就可以在JS 中使用Window.external.function();調用JSObject()的function() 方法了。
下面是一個例子：
[html] view plain copy
- <HTML>
- <HEAD>
- <TITLE>Invoke C# Sample</TITLE>
- </HEAD>
- <BODY>
- <DIV id="div1">
- </DIV>
- <SCRIPT>
- window.external.CallShow();
- //傳參數
- window.external.ShowSomething("Hello");
- //返回值
- var msg = window.external.returnSomething("Hello");
- alert(msg);
- //直接獲取變量
- alert(window.external.a);
- </SCRIPT>
- </BODY>
- </HTML>
[csharp] view plain copy
- [System.Runtime.InteropServices.ComVisible(true)]
- public class JSObject
- {
- // 無參數，無返回值
- public void CallShow()
- {
- MessageBox.Show("Called from JS");
- }
- //無返回值，有參數
- public void ShowSomething(String msg)
- {
- MessageBox.Show("Called from " + msg);
- }
- //有返回值，有參數
- public string returnSomething(String msg)
- {
- msg += "From C#";
- return msg;
- }
- //直接獲取變量
- public string a = "A";
- }
簡單的傳值就是這樣實現的，但是對於復雜對象傳遞，涉及到JS對象和C#對象轉換，並不是很方便，能用字符串的還是用字符串吧。
用JSON傳遞是個不錯的選擇，C#和JS中都有JSON轉換工具，可以試試。
以上！
WebBrowser（IE） 與 JS 相互調用