【C# WinForm】「WebView2」を使ってみる（WebBrowserをChromium Edgeで最新化）

今まで、.NetのWindows Formでは「WebBrowser」と言う標準のコントロールでブラウザ表示ができましたが、中身はIEなのでもはや過去の遺物に。
そこからEdge対応した「WebView」が公開され、割と短い寿命でChromium Edgeに代わってしまったので、それに対する最新のコントロールが「WebView2」となります。

さすがに「WebBrowser」を使い続けるわけにはいかない、と言うことで「WebView2」に置き換えるために実際に使ってみます。

導入

詳細はこちらで書かれていますが、

docs.microsoft.comまず、準備としては「WebView2 Runtime」または「Microsoft Edge (Chromium) 非永続的なチャネル」が必要とのこと。 （今回は、Beta版のチャネルを入れました）
後は、 NuGetから「WebView2」をインストールするだけ。

取りあえずの使い方

ページを表示するには、WebBrowserのUrlと同等のSourceプロパティにUriで設定すれば表示されます。
どちらも内部でNavigateメソッドを呼んでいるのは同じで、Navigateを直接呼び出しても同じです。
ただし、WebView2版のNavigateはCoreWebView2クラスで持ち、インスタンスを内包していて同名のプロパティでアクセスできます。

WebBrowserで読み込み完了イベントのDocumentCompletedはNavigationCompletedに置き換わります。
またGoBack、GoForwardやStopと言った基本的な操作メソッドは同様に利用できます。

大きな差異

使ってみて置き換えに一番困ったのは、WebBrowserは自身でWebページの要素をHtmlElementとしてHtmlDocumentで参照、操作が容易にできていましたが、WebView2には存在しないことです。

ではどうするかと言うと、ExecuteScriptAsyncメソッドにJavaScriptを書いた文字列を渡すとWebページ上で実行できるので、ここから全てJavaScriptを使って操作することになります。 例としてプログラム上の変数と組み合わせるとこのような感じになります。

ExecuteScriptAsync($"document.getElementById('{id}').setAttribute('{attributeName}', '{value}');");

また、ExecuteScriptAsyncは文字列の戻り値があり、JavaScriptで実行した戻り値を文字列で受けることもできます。
（ちなみに、nullの場合は"null"の文字列で返ってきました）

HtmlDocumentを使って色々と処理をしていた場合には、置き換えにかなり苦労するかと思うのですが、さらに困ったのがデバッグ。

表示しているブラウザはChromium EdgeなのでDevToolsが使えるのですが、プログラム上で書いたJavaScriptのエラーは検出されないところで、記述ミスなのか別のエラーなのかの特定に困りました・・・

JavaScriptでconsoleを読んでも、ブラウザ上のDevToolsでは表示されません。なので、alertを使いながら特定する羽目に。

良い方法があると思うのですが、、情報は見つけられずの状態です。

スポンサードリンク