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メソッドで変換してから送りましょう。
参考
Windows Forms アプリでの WebView2 の概要 (プレビュー)
WebView2 Class
Microsoft.Web.WebView2.Core Namespace
WebView2Browser