碼上歡樂
相關內容    簡體    繁體

WebBrowser（IE） 與 JS 相互調用

本文轉載自   查看原文   2018-02-28 16:55   4695    WPF

在開發中我們經常將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
 
  1. <HTML>  
  2.     <HEAD>  
  3.         <TITLE>Invoke Script Sample</TITLE>  
  4.         <SCRIPT>  
  5.             //無參數調用  
  6.             function alertNull(){  
  7.                 alert("WebBrowser call!");  
  8.             }  
  9.             //有參數調用  
  10.             function callWithPar(name, address) {  
  11.                 alert("Name is " + name + "; address is " + address);  
  12.             }  
  13.             
  14.             //返回字符串  
  15.             function returnString() {  
  16.                 return("This is a test.");  
  17.             }  
  18.   
  19.             //返回對象  
  20.             function returnScriptObject() {  
  21.                 return(new(MyObject));  
  22.             }  
  23.   
  24.             function MyObject() {  
  25.                 this.Data = "Data for my private object.";  
  26.             }  
  27.         </SCRIPT>  
  28.     </HEAD>  
  29.   
  30.     <BODY>  
  31.         <DIV id="div1">  
  32.         </DIV>  
  33.     </BODY>  
  34. </HTML>  

 

[csharp]  view plain copy
 
  1. private void button2_Click(object sender, EventArgs e)  
  2.         {  
  3.             string name = "dai";  
  4.             string address = "123";  
  5.             if (webBrowser1.Document != null)  
  6.             {  
  7.                 HtmlDocument doc = webBrowser1.Document;  
  8.                 //無參調用  
  9.                 doc.InvokeScript("alertNull");  
  10.   
  11.                 Object[] objArray = new Object[2];  
  12.                 objArray[0] = (Object)name;  
  13.                 objArray[1] = (Object)address;  
  14.   
  15.                 //有參調用  
  16.                 doc.InvokeScript("callWithPar", objArray);  
  17.   
  18.                 //返回字符串  
  19.                 String str = doc.InvokeScript("returnString").ToString();  
  20.                 MessageBox.Show(str);  
  21.                 //返回對象  
  22.                 Object jscriptObj = doc.InvokeScript("returnScriptObject");  
  23.                 MessageBox.Show(jscriptObj.ToString());  
  24.             }  
  25.         }  

如果網頁中不存在目標腳本，我們也可以創建腳本再執行。

 

 

[csharp]  view plain copy
 
  1. HtmlElement ele = webBrowser1.Document.CreateElement("script");  
  2. ele.SetAttribute("type", "text/javascript");  
  3. ele.SetAttribute("text", "alert('new script')");  
  4. 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
 
  1. <HTML>  
  2.     <HEAD>  
  3.         <TITLE>Invoke C# Sample</TITLE>  
  4.     </HEAD>  
  5.   
  6.     <BODY>  
  7.         <DIV id="div1">  
  8.         </DIV>  
  9.         <SCRIPT>  
  10.   
  11.             window.external.CallShow();  
  12.             //傳參數  
  13.             window.external.ShowSomething("Hello");  
  14.             //返回值  
  15.             var msg = window.external.returnSomething("Hello");  
  16.             alert(msg);  
  17.              
  18.             //直接獲取變量  
  19.             alert(window.external.a);  
  20.         </SCRIPT>  
  21.     </BODY>  
  22.   
  23. </HTML>  


[csharp]  view plain copy
 
  1. [System.Runtime.InteropServices.ComVisible(true)]  
  2.         public class JSObject  
  3.         {  
  4.             // 無參數，無返回值  
  5.             public void CallShow()  
  6.             {  
  7.                 MessageBox.Show("Called from JS");  
  8.             }  
  9.   
  10.             //無返回值，有參數  
  11.             public void ShowSomething(String msg)  
  12.             {  
  13.                 MessageBox.Show("Called from " + msg);  
  14.             }  
  15.   
  16.             //有返回值，有參數  
  17.             public string returnSomething(String msg)  
  18.             {  
  19.                 msg += "From C#";  
  20.                 return msg;  
  21.             }  
  22.             //直接獲取變量  
  23.             public string a = "A";  
  24.   
  25.         }  


簡單的傳值就是這樣實現的，但是對於復雜對象傳遞，涉及到JS對象和C#對象轉換，並不是很方便，能用字符串的還是用字符串吧。

 

用JSON傳遞是個不錯的選擇，C#和JS中都有JSON轉換工具，可以試試。

以上！

 


 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 flex與js相互調用 JS和Flash(AS)相互調用 Js和原生相互調用總結 QWebEngineView使用-Qt與Js相互調用 WebView中Js與Android本地函數的相互調用 iOS開發oc與js相互調用的方式方法 js中子頁面父頁面方法 變量相互調用 二、java 與 scala相互調用 函數之間可以相互調用 OC與swift相互調用
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM