WebView2コントロールでの操作

WebView2の初期化の待機

WebView2コントロールは初期化されるのに時間がかかりますので、 EnsureCoreWebView2Asyncメソッドで初期化が完了するのを待ちます。

初期化の完了を待たないでwebView2.CoreWebView2にアクセスするとNullReferenceExceptionが発生する場合があります。

							Private Sub Form_Load(sender As Object, e As EventArgs) Handles MyBase.Load

								InitializeAsync()
				
							End Sub
							
							Private Async Sub InitializeAsync()
				
								Await WebView2.EnsureCoreWebView2Async(Nothing)
				
							End Sub
						
							public Form1()
							{
								InitializeComponent();
								InitializeAsync();
							}
				
							async void InitializeAsync()
							{
								await webView.EnsureCoreWebView2Async(null);
							}
						

WebView2コントロールでWebサイトを操作する方法

WebView2コントロールを使ってWebページを表示するにはwebView2.CoreWebView2.Navigateメソッドを使用します。

							WebView2.CoreWebView2.Navigate("https://web.biz-prog.net/") '開きたいURL
						
							webView2.CoreWebView2.Navigate("https://web.biz-prog.net/"); //開きたいURL
						

詳しくは左メニューの「WebView2コントロール 基本操作」を参照してください。

WebView2コントロールでDOM操作する方法

InternetExplorer操作やWebBrowserコントロールでのDOM操作は、直接DOM操作できるメソッド・プロパティ(getElementByIdメソッドやdocumentプロパティ等)がありましたが、 WebView2コントロールにはこのようなメソッドはありません。

WebView2コントロールでは、ExecuteScriptAsyncメソッドを使用して、JavaScriptのコードを使ってWebページを操作します。

ExecuteScriptAsyncメソッドの引数に、実行したいJavaScriptのコードの文字列を渡して実行します。
DOMの値を取得する場合は、ExecuteScriptAsyncメソッドの戻り値を取得してください。

具体的な要素の指定や操作の方法については、左メニューの「>WebView2コントロール HTML要素の指定」 「>WebView2コントロール HTML要素の操作(DOM操作)」を参照してください。

							Private Async Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

								'Yahooの検索欄に文字を設定する
								Await WebView2.ExecuteScriptAsync($"document.getElementsByName('p')[0].value = 'プログラムでネットサーフィン!';")
						
								'検索欄の文字列を取得する
								Dim result = Await WebView2.ExecuteScriptAsync("document.getElementsByName('p')[0].value")
								MessageBox.Show(result)
						
								'submitして検索を実行
								Await WebView2.ExecuteScriptAsync($"document.forms['sf1'].submit();")
						
							End Sub
						
							async private void button1_Click(object sender, EventArgs e)
							{
								//Yahooの検索欄に文字を設定する
								await webView2.ExecuteScriptAsync($"document.getElementsByName('p')[0].value = 'プログラムでネットサーフィン!';");
					
								//検索欄の文字列を取得する
								var result = await webView2.ExecuteScriptAsync("document.getElementsByName('p')[0].value");
								MessageBox.Show(result);
					
								//submitして検索を実行
								await webView2.ExecuteScriptAsync($"document.forms['sf1'].submit();");
							}
						

アプリケーションとWebコンテンツ間の通信

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

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

詳しくは左メニューの「WebView2コントロールとWebページ(JavaScript)の連携」を参照してください。

WebView2のサイト表示待ち方法

navigateメソッドでWebページを表示したり、リンクのクリックを行ったり、Submitを行った場合などは、ページの読み込み・表示が終わるまでの待機する処理が必要です。
以下の処理によりページの表示が終わるまで待機します。

						Imports Microsoft.Web.WebView2.Core

						Public Class Form1

							Private ReadOnly condition As New System.Threading.CountdownEvent(1)

							Private Sub FormWebView2_Load(sender As Object, e As EventArgs) Handles MyBase.Load
								InitializeAsync()
							End Sub
						
							Async Sub InitializeAsync()
								Await WebView2.EnsureCoreWebView2Async(Nothing)
							End Sub

							Private Async Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
						
								Dim result As String = ""
								'サイトの表示を開始
								WebView2.CoreWebView2.Navigate("https://web.biz-prog.net/")						

								'非同期実行
								Await Task.Run(
									Sub()
										'読み込み完了まで待機
										If condition.Wait(5000) Then
											result = "ok"
										Else
											result = "timeout"
										End If
									End Sub
								)
						
								MsgBox(result)
						
							End Sub
						
							Private Sub WebView2_NavigationCompleted(sender As Object, e As CoreWebView2NavigationCompletedEventArgs) Handles WebView2.NavigationCompleted
						
								'読み込み結果を判定
								If e.IsSuccess Then
									Console.WriteLine("complete")
								Else
									Console.WriteLine(e.WebErrorStatus)
								End If
						
								'シグナル初期化
								condition.Signal()
								System.Threading.Thread.Sleep(1)
								condition.Reset()
						
							End Sub
					
						End Class
					
						using System;
						using System.Text;
						using System.Threading;
						using System.Threading.Tasks;
						using System.Windows.Forms;
						using Microsoft.Web.WebView2.Core;

						public partial class Form1 : Form
						{
							readonly CountdownEvent condition = new CountdownEvent(1);

							private void Form1_Load(object sender, EventArgs e)
							{
								InitializeAsync();
							}
					
							async void InitializeAsync()
							{
								await webView2.EnsureCoreWebView2Async(null);
								webView2.CoreWebView2.NavigationCompleted += webView2_NavigationCompleted;
							}

							private async void button1_Click(object sender, EventArgs e)
							{
								string result = "";
								
								//サイトの表示を開始
								webView2.CoreWebView2.Navigate("https://web.biz-prog.net/");
					
								//非同期実行
								await Task.Run(() =>
								{
									//読み込み完了まで待機
									if (condition.Wait(5000))
										result = "ok";
									else
										result = "timeout";
								});
					
								MessageBox.Show(result);
							}
					
							private void webView2_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
							{
								//読み込み結果を判定
								if (e.IsSuccess)
									Console.WriteLine("complete");
								else
									Console.WriteLine(e.WebErrorStatus);
					
								//シグナル初期化
								condition.Signal();
								System.Threading.Thread.Sleep(1);
								condition.Reset();
							}
						}	
					

実行時にエラーが発生する場合

アプリ実行時にWebView2コントロールでSystem.NullReferenceExceptionが発生する場合は、以下を確認してください。

・WebView2ランタイムまたはEdge(Canaryチャネル)がインストールされているか。

・WebView2ランタイムではなくEdge(Canaryチャネル)をインストールしている場合、最新のバージョンとなっているか。

・WebView2の初期化が完了してからアクセスしているか。(WebView2の初期化の待機)

・Edgeが64bitであれば、プロジェクトのプロパティで「32ビットを優先」は外して、64ビットアプリがビルドされるようにしているか。

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

次のページでWebView2コントロールとWebページのJavaScriptでの情報のやりとり方法について解説します。
WebView2コントロールとWebページの連携

参考