WebBrowserからWebView2へ(5)

スポンサーリンク

WEBVIEW2を使用してみる(5)JavaScriptの外出し/右クリックメニューの追加

前回までの内容で、ひとまず要素操作の基本的なところはできたかなと思う。
今回はオリジナルの右クリックメニュー追加を行うついでに、コードがもっさりしてきたので
直書きしているJavaScriptのファイル化などコード整理も行う。

やりたいこと
・ 右クリックしたときオリジナルのコンテキストメニューを表示する。
・ マウスオーバーしている要素に枠線をつけて、対象要素を視覚的にわかるようにする。

ソース整理
・ ソースに直書きしているJavaScriptコード部分をjsファイルで管理する。
・ マウスイベント関連のスクリプトはサイト読込完了時に自動で設定する。
・ マウスイベントでVB側に送る情報はjson形式にする。
・ VB側はjson形式データを受信後はクラスデータにデシリアライズする。

開発環境

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

JavaScriptコード部分をjsファイル化する

test.jsを作成しそちらにjavaScriptのイベントリスナーや呼び出し関数をまとめた。
あとはReadAllTextで読み取ってあげればいいだけ。これは思いのほか簡単。

実装したJavaScriptは以下の通り、
・mouseoverイベント:マウスオーバー時にアクティブ要素にボーダー設定
・mouseoutイベント:マウスアウト時にボーダー解除
・contextmenuイベント:右クリック時にjsonデータ(位置と要素情報)をwebView2へ送信
・mousedownイベント:右クリック時にjsonデータ(位置)をwebView2へ送信
・ElementClick/ElementInput関数:前回作ったものをファイルへ移動

test.js

VB側の受信処理/受信Jsonのデシリアライズ

マウスイベント関連でpostMessageされたjsonデータは、
WebMessageReceivedイベントのWebMessageAsJsonより取得できる。
jsonのデシリアライズにはNewtonsoft.Jsonをインポートして使用。

受信データよりキーが”contextmenu”ならば右クリックイベントとして判定して
同じくjsonで受信した位置情報にもとにコンテキストメニューを表示する。

サイト読込完了時にスクリプトを自動設定

NavigationCompletedイベントでサイト遷移完了を検知したときにtest.jsを設定するようにした。
またNavigationStartingイベントでサイト遷移開始時に右クリックメニュー禁止+状態判定プロパティを初期化させている。

これでサイト内リンクなどで別サイトへ遷移したときも、また遷移完了イベントが走りtest.jsを設定してくれる。

サンプルコード

Form1.vbのほうでカスタムメニュー作成してWebviewへセット。
右クリックメニューの内容はとりあえず要素データをポップアップする感じにした。

Form1.vb

ClsWebView.vb


マウスオーバー時の要素枠付けは成功


右クリックメニューの表示も大丈夫そう


コメント

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