WebBrowserからWebView2へ(4)

スポンサーリンク

WEBVIEW2を使用してみる(4)HTML要素の検索と操作

前回に引き続きDOM操作のテスト。

やってみたいこと
・ WebView2へ表示したサイトより指定の要素を検索する。
・ 検索した要素(テキストボックス)へ検索ワードをセット
・ 検索した要素(検索ボタン)より検索を実行
・ 今回はGoogleさんの検索ボックスでテストさせて頂こうとおもいます。

開発環境

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

WebBrowserのようにHtmlElement操作できないのか?

WebBrowserだと、WebBrowser.DocumentでHtmlElementが操作できたがWebView2には
同等の機能はないみたい。事前調べで知ってはいたがjavaScriptで代用するしかないとのこと。

しかし今までの仕組みと互換性なくなるよなぁ。本当にできないの?と、ちょっと疑問だったので
前回JavaScriptとVBを連携させた要領で
・サイト側から”document.body.outerHTML”でHTMLを取得
・HTMLをHtmlDocumentクラスへ変換してgetElementById関数などを使用
という力業ができないかやってみたのですが上手くいかず。。。

時間ももったいないし、まぁ推奨がJavaScriptを使ってってことだろうから
切り替えてJavaScriptで代用するやりかたを先に進める。

要素検索して文字列を入力する。要素検索してクリックする。

例のごとくExecuteScriptAsyncを使ってJavaScriptをセットする。
JavaScript側ではhtmlElmentで要素扱えるので、以下のようにタグ等の要素情報を渡して
内部検索させる。ヒットしたら.valueで文字列セット。クリックの場合なら.click()を実行。

ちなみにJavaScriptをFunction化してるのは連続して同じJavaScriptをExecuteScriptAsync
を実行させたときletなどの変数定義も2回されてしまうみたいで2度目は実行がされなかったため。

しかしデバッグがVisualStudioでなくブラウザ側のデバッグツールでやらないといけないのは、
なかなか慣れない。このあたりも効率化調べなければ

関数はわざわざ2個作ってるけど、内部検索の部分は共通なのでもっとすっきりできそう。

サンプルコード

ClsWebViewへ要素クリック用の関数と要素入力用の関数を追加。
AddJsEvent関数をちょっと修正(onclick→onmouse)
ClsWebView.vb

Form1側は、あらたにautoExecBtnコントロールを追加。
クリックすると自動で検索してくれる。検索ワードは日付にちなんで「ひなまつり」。
Form1.vb


検索は無事成功。


まだまだ触りたいWebview2。
次回はマウスジェスチャーや右クリックメニューのカスタムなんかを試したい。
自分用に使いやすいオリジナルブラウザソフトなんか作れると満足。

コメント

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