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>
    <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轉換工具,可以試試。

以上!

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章