WebView2コントロールとWebページ(JavaScript)の連携

C#/VBアプリケーションとWebView2コントロール間の通信

アプリケーションとWebView2内のWebコンテンツとの間で、データのやり取りを行うことができます。

アプリからJavaScriptの処理を実行するExecuteScriptAsyncメソッドや、 アプリから文字やJsonデータをJavaScriptに送ったり(JavaScriptで受信イベントが発生)、 JavaScriptコードにてアプリに文字を送ることが可能です。

VB/C#からWebページのJavaScriptにデータを送る方法

VB/C#からWebページのJavaScriptにデータを送るには、PostWebMessageAsStringメソッドまたはPostWebMessageAsJsonメソッドを使用します。
文字列を送る場合はPostWebMessageAsStringメソッド、Jsonパラメータを送る場合はPostWebMessageAsJsonメソッドを使用します。

JavaScript側では、データを受け取る為にmessageイベントハンドラを定義します。

下記コードでは、Formでボタン押下するとJavaScriptで受け取ったメッセージをalert表示します。

							'WebViewコントロール初期化時に、AddScriptToExecuteOnDocumentCreatedAsyncメソッドにてJavaScriptにmessageイベントハンドラを追加する。
							'※今回はAddScriptToExecuteOnDocumentCreatedAsyncメソッドでmessageイベントハンドラを追加していますが、
							' ExecuteScriptAsyncメソッドで追加しても良いです。
							Private Async Sub InitializeAsync()
								Await WebView2.EnsureCoreWebView2Async(Nothing)
								Await WebView2.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.addEventListener('message',  function(e) { alert('message received:' + e.data);});")
							End Sub
				
							'Webページ(JavaScript)にmessageイベントを発生させ文字を送付する。
							Private Async Sub btnSendMessageToJS_Click(sender As Object, e As EventArgs) Handles btnJS.Click
								WebView2.CoreWebView2.PostWebMessageAsString("test")
							End Sub
						
							//'WebViewコントロール初期化時に、AddScriptToExecuteOnDocumentCreatedAsyncメソッドにてJavaScriptにmessageイベントハンドラを追加する。
							async void InitializeAsync()
							{
								await webView2.EnsureCoreWebView2Async(null);
								await webView2.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.addEventListener('message',  function(e) { alert('message received:' + e.data);});");
							}
				
							//Webページ(JavaScript)にmessageイベントを発生させ文字を送付する。
							//※今回はAddScriptToExecuteOnDocumentCreatedAsyncメソッドでmessageイベントハンドラを追加していますが、
							// ExecuteScriptAsyncメソッドで追加しても良いです。	        private void btnSendJS_Click(object sender, EventArgs e)
							{
								webView2.CoreWebView2.PostWebMessageAsString("test");
							}
						

JavaScriptからメッセージを送り、VB/C#で受け取る方法

JavaScriptからpostMessageメソッドによりVB/C#にメッセージを送ります。
VB/C#側でメッセージを受け取るため、WebMessageReceivedイベントハンドラに受信時の処理を定義します。

この方法はJavaScriptからVB/C#に一方的にメッセージを送るもので、JavaScript側に何か値を返すことはできません。

下記コードでは、Formでボタン押下するとJavaScriptが表示中ページのURLをVB/C#に通知し、VB/C#は受け取ったメッセージを表示します。

							'メッセージ受信のイベントハンドラを定義します。JavaScriptからメッセージを受信したときに実行します。
							Private Sub MessageReceived(sender As Object, args As Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs) Handles WebView2.WebMessageReceived
								Dim text As String = args.TryGetWebMessageAsString()
								MsgBox(text)
							End Sub
				
							'WebView2にJavaScriptの実行を依頼します。表示中のurlをVB/C#側に通知します。
							Private Async Sub btnJStoCS_Click(sender As Object, e As EventArgs) Handles btnJStoCS.Click
								Await WebView2.CoreWebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(window.document.URL);")
							End Sub
						
							//WebView2の初期化後、メッセージ受信のイベントハンドラを定義します。
							async void InitializeAsync()
							{
								await webView2.EnsureCoreWebView2Async(null);
								webView2.CoreWebView2.WebMessageReceived += MessageReceived;
							}
							
							//JavaScriptからメッセージを受信したときに実行します。
							private void MessageReceived(object sender, Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs args)
							{
								String text = args.TryGetWebMessageAsString();
								MessageBox.Show(text);
							}
							
							//WebView2にJavaScriptの実行を依頼します。表示中のurlをVB/C#側に通知します。
							private async void btnJStoCS_Click(object sender, EventArgs e)
							{
								await webView2.CoreWebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(window.document.URL);");
							}

							private async void btnJStoCS_Click2(object sender, EventArgs e)
							{
								StringBuilder js = new StringBuilder();
								js.AppendLine("$('div.ticket').on({");
								js.AppendLine("  'mouseenter':function(){");
								js.AppendLine("    var text = $(this).attr('id');");
								js.AppendLine("    window.chrome.webview.postMessage(text);");
								js.AppendLine("  }");
								js.AppendLine("});");
								await webViewUke.CoreWebView2.ExecuteScriptAsync(js.ToString());
							}
						

WebMessageReceivedイベントのTryGetWebMessageAsStringメソッドで取得できる型は文字列である必要があります。
JavaScriptのpostMessageで文字列以外を送ってしまうと、TryGetWebMessageAsStringメソッドの呼び出し時にSystem.ArgumentExceptionが発生します。
toStringメソッドで変換してから送りましょう。
await webView2.CoreWebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementsByName('radioname')[1].checked.toString());");

参考