WebBrowser（IE） 與 JS 相互調用

来源:https://www.cnblogs.com/smiler/archive/2018/02/28/8484541.html
-Advertisement-
Play Games

在開發中我們經常將WebBrowser控制項嵌入Winform 程式來瀏覽網頁，既然是網頁那麼少不了JS。下麵就讓我們來說說他們兩之間的相互調用。 在C#封裝的瀏覽器內核中，Chromium 內核封裝有Xilium.Cefglue、Cefsharp，Webkit 內核封裝 Webkit.Net 、Op ...


在開發中我們經常將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轉換工具，可以試試。

以上！

 


 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Windows下Python的安裝
    Python官網：https://www.python.org/blogs/ 下載所需的python版本 下載好後雙擊運行安裝程式 下麵勾選 → 點擊Install Now 進行安裝 完成後在命令框中輸入 python 即可查看 ...
  • ASP.NET Core Logging in Elasticsearch with Kibana
    在微服務化盛行的今天，日誌的收集、分析越來越重要。ASP.NET Core 提供了一個統一的，輕量級的Logining系統，並可以很方便的與第三方日誌框架集成。我們也可以根據不同的場景進行擴展，因為ASP.NET Core Logining系統設計的非常靈活性，我們可以很容易的添加自己的LogPro ...
  • [UWP]做個調皮的BusyIndicator
    1. 前言 最近突然想要個BusyIndicator。做過WPF開發的程式員對BusyIndicator應該不陌生， "Extended WPF Toolkit" 提供了BusyIndicator的開源實現，Silverlight Toolkit也有一個，這次想要把這個控制項移植到UWP中。 2. 先 ...
  • 三層+EasyUI+Ajax 提交Form表單
    ...
  • 菜鳥之旅——.NET垃圾回收機制
    .NET的垃圾回收機制是一個非常強大的功能，儘管我們很少主動使用，但它一直在默默的在後臺運行，我們仍需要意識到它的存在，瞭解它，做出更高效的.NET應用程式；下麵我分享一下我對於垃圾回收機制（GC）的學習心得。 GC的必要性 我們知道程式會需要向記憶體堆使用new請求記憶體，然後將請求的記憶體初始化並使用 ...
  • UML速記
    依賴：虛線箭頭 關聯：實線箭頭 介面：虛線三角 父類：實線三角 聚合：空心菱形 組合：實心菱形 順著箭頭方向： 依賴於和什麼關聯是什麼的子類是什麼的介面的實現是什麼的聚合是什麼的組合 ...
  • Asp.Net Core 基於QuartzNet任務管理系統
    之前一直想搞個後臺任務管理系統，零零散散的搞到現在，也算完成了。 這裡發佈出來，請園裡的dalao批評指導！ 廢話不多說，進入正題。 github地址：https://github.com/YANGKANG01/QuartzNetJob 一、項目結構 項目結構如下： ORM使用的是SqlSugar版 ...
  • sqlsever 科學計數法 轉標準值
    sqlsever 科學計數法 轉標準值 E e cast convert 2e-005 轉成 0.00002 2e+005 轉成 200000 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類