2024-06-12

[C#] Edge WebView2 與 WinForms:實現按鈕事件與本地代碼交互的指南

今天來寫一篇關於 Edge WebView2 中會用到的部份,就是我在載入在 Edge WebView 2 中的網頁

我先注入 JQuery ,然後我加入按鈕事件以外,並且將該按鈕點擊事件中,傳入訊號給主體的 winform 

這樣就可以做到 call native code.


範例說明 這畫面中有三個黑色的按鈕,我會先注入 jQuery ,改變那三顆 ( class= "common-button__content") 的按鈕內容

並且加入 click 事件,點擊後讓他能夠呼叫 winform 中的 function 

1. 參考這邊文章讓你有基本的理解 並且安裝好 Edge WebView2 套件

2. 之後在  WebView21_NavigationCompleted 中加入一個事件 WebMessageReceived 其中範例就是將收到從 網頁來的訊息直接使用 

MessageBox 給呈現出來


3. 呼叫 jQuery 並且,讓 那三顆 ( class= "common-button__content") 的按鈕點擊後,傳送訊息到 winform 中


結果:



reference:

https://learn.microsoft.com/zh-tw/microsoft-edge/webview2/how-to/hostobject?tabs=win32