WebBrowserからWebView2へ(3)

スポンサーリンク

WEBVIEW2を使用してみる(3)マウスクリックイベントの連携と要素情報の取得

前回に続いて、ようやくWebView2のDOM操作の試運転にはいってみる。

やってみたいこと
・ WebView2へ表示したサイトのマウスイベントへ処理を入れる。
  とりあえずマウスクリックでテスト。
・ マウスクリックされたHTML要素のタグやクラス情報をVB側で取得
・ 取得した情報をMsgBoxでポップアップ

開発環境

・ Windows10
・ Microsoft Visual Studio 2019 (VB .NET)

マウスクリックイベント

WebBrowserだと、
AddHandler WebBrowser.Document.Body.MouseUp, AddressOf “任意関数”
とかでVBで書いた関数とかにイベント紐付けれたけど、
WebView2だとJavaScriptを設定してあげてイベント処理の実装するみたい。

下の例はJavaScriptでonclickイベントにalertメッセージを表示する簡単な処理を
ExecuteScriptAsyncメソッドで設定してあげる。

クリック時に無事メッセージ表示されるの確認

JavaScriptからの戻り値取得

VB側からブラウザに対してのイベント設定は確認できたけど、
ブラウザ側からVBへの値渡しもできないと一方通行で連携とはいえない。

方法は何個かあるみたいだけど今回はWebMessageReceivedイベントを使ってみる。
JavaScript側からメッセージを受信したときに発生するイベントなので
今回作りたい機能的にマウスクリックされた要素情報を取得するのに使えそう。

まず組み込むJavaScriptの中にpostMessageメソッドを仕込んどいて、
戻り値情報をWebView2へかえすようにする。

下例ではJavaScriptコード内でタグ名、クラス名なんかを返すようにしてる。
return false;はリンククリックしたときのサイト遷移防止用

前回作ったClsWebViewへWebMessageReceivedイベントを追加。
受け取った情報はMsgBoxで表示。

サンプルコード

前回作ったClsWebViewへJavaScriptイベント追加用の関数と受信イベントを追記
ClsWebView.vb

Form1側は、フォームロードで設定していたボタンクリックイベントをちょっと改造
サイト遷移完了後にイベント設定する。
Form1.vb

「Gmail」のところをクリックして、要素情報でることを確認。
連携もなんとかできそうですね。


次回は要素操作なんかを試してみたいと思います。

タイトルとURLをコピーしました