WebBrowser（IE） 與 JS 相互呼叫
阿新 • • 發佈：2019-01-01
在開發中我們經常將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> <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>
如果網頁中不存在目標指令碼，我們也可以建立指令碼再執行。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()); } }
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>
<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>
[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轉換工具，可以試試。
以上！