WebViewコントロール(.NET MAUI)の基本的な操作

ここではWebViewコントロール(.NET MAUI)の基本的な操作方法について解説します。

操作を行うための前準備については以下を参考にしてください。

Webページの表示

URLを指定してWebページを表示するにはSourceプロパティを使用します。
htmlのコードの内容を表示させる場合もSourceプロパティに設定します。

ただし、Sourceプロパティはページの読み込み完了を待ちませんので、
後述する読み込み完了待ちの処理をいれないと、読み込み途中のまま次の処理が行われてしまいます。

実装方法

指定したURLをWebView2コントロールで表示します。
MyWebView.Source = "URL または htmlコード";

サンプル

						//urlを指定する場合
						MyWebView.Source = "https://web.biz-prog.net/";
						
						//htmlコードから表示する場合
						string htmlSource = @"test";
						MyWebView.Source = new HtmlWebViewSource() { Html = htmlSource };

読み込み待ち

SourceプロパティでWebページを表示したり、リンクのクリックを行ったり、Submitを行った直後は、
ページの読み込み途中なので続けて処理を行うとエラーになります。
ページの読み込みが終わるまで待機する処理が必要です。

WebViewでは読み込みが完了するとNavigatedイベントが発生しますので、
Navigatedイベントが発生するまで処理を待機してやります。

サンプル

							using System.Diagnostics;

							namespace MauiWebView;
				
							public partial class MainPage : ContentPage
							{
								readonly CountdownEvent condition = new CountdownEvent(1);
				
								public MainPage()
								{
									InitializeComponent();
				
									MyWebView.Navigated += WebView_Navigated;
								}
				
								private void WebView_Navigated(object sender, WebNavigatedEventArgs e)
								{
									//読み込み結果を判定
									if (e.Result == WebNavigationResult.Success)
										Debug.WriteLine("complete");
									else
										Debug.WriteLine("error");
				
									//シグナル初期化
									condition.Signal();
									System.Threading.Thread.Sleep(1);
									condition.Reset();
								}
				
								private async void OnNavigateClicked(object sender, EventArgs e)
								{
									MyWebView.Source = "https://web.biz-prog.net/test/testpage.html";
				
									//非同期実行
									await Task.Run(() =>
									{
										//読み込み完了まで待機
										if (!condition.Wait(5000))
										{
											Debug.WriteLine("timeout");
											return;
										}
									});
									
									Debug.WriteLine("読み込み完了");
				
									await MyWebView.EvaluateJavaScriptAsync("document.getElementById('inputid2').value = 'テキスト２ all id';");
								}
							}

戻る／進む

閲覧履歴の「戻る」「進む」を行います。
これら操作でもページの読み込みが発生しますので、メソッド実行後に、読み込み完了を待つ処理が必要です。（上記参照）

実装方法

サンプル

						if (MyWebView.CanGoBack)
						{
							MyWebView.GoBack();
						}
			
						if (MyWebView.CanGoForward)
						{
							MyWebView.GoForward();
						}

中止／リロード

サイトのリロード（再読み込み）を行います。
リロードを行った場合はサイトの読み込みが発生しますので、メソッド実行後には読み込み完了を待つ処理が必要です。

実装方法

サンプル

						//中止を行うようなメソッドは存在しなかった

						//リロード
						MyWebView.Reload();

URL／ローカルhtmlの取得

WebViewコントロールから現在表示しているサイトのURLやローカルhtmlを取得します。

実装方法

WebViewのSourceプロパティにはURLまたはローカルhtmlが取得できます。
Sourceプロパティの取得値はWebViewSourceクラスなので、
入っている値がurlなのかローカルhtmlコードなのかを判定します。

サンプル

						if (MyWebView.Source is UrlWebViewSource url)
						{
							//URL形式の場合
							Debug.WriteLine(url.Url);
						}
						else if (MyWebView.Source is HtmlWebViewSource html)
						{
							//html形式の場合
							Debug.WriteLine(html.Html);
						}

htmlの取得

現在表示しているページのhtmlを取得します。

実装方法

EvaluateJavaScriptAsyncとJavaScriptのコードを使ってhtmlを取得します。
取得した文字列に対して、文字コードの変更と、文頭の余計な文字を除去します。

サンプル

						var html = await MyWebView.EvaluateJavaScriptAsync("document.documentElement.outerHTML");
						html = Regex.Unescape(html);
						html = html.Remove(0, 1);  //OSによっては先頭にゴミが入っていないのでRemoveは不要の場合があります。