WebView2コントロールによるHTML要素の操作

テキストボックスに文字を入力したりボタンをクリックするなど、HTML要素を操作する方法について説明します。
HTML要素を指定する方法については要素の指定を参照してください。

目次

WebView2コントロールのHTML要素へのアクセス方法について

WebView2コントロールにはDOMを直接操作するメソッドはありません。
代わりの手段としてExecuteScriptAsyncメソッドを使います。

ExecuteScriptAsyncメソッドは、表示しているWebページに対してJavaScriptを実行できますので、
JavaScriptでDOMを操作するコードを作成し、実行してやります。

※WebViewコントロールでのJavaScript実行についてはこちらを参照。

クリック

ボタン／ラジオボタン／チェックボックス／リンク等をクリックする方法です。

実装方法

JavaScriptでクリックしたい要素を指定してClickメソッドを実行します。
そうすればマウスでクリックしたときと同じようにクリックが行われます。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で。
						'メソッドには「Async」をつけてください。
						
						'ボタンをクリック
						Await WebView2.ExecuteScriptAsync("document.getElementById('buttonid1').click();")

						'ラジオボタンの２つ目をクリック
						Await WebView2.ExecuteScriptAsync("document.getElementsByName('radioname')[1].click();")

						'チェックボックスをクリック
						Await WebView2.ExecuteScriptAsync("document.getElementsByName('checkname')[0].click();")

						'リンクをクリック
						Dim js As New System.Text.StringBuilder()
						js.AppendLine("for (let i = 0; i < document.links.length; i++)")
						js.AppendLine("{")
						js.AppendLine("    if(document.links[i].innerText == 'リンク１')")
						js.AppendLine("    {")
						js.AppendLine("        document.links[i].click();")
						js.AppendLine("        break;")
						js.AppendLine("    }")
						js.AppendLine("}")
						Await WebView2.ExecuteScriptAsync(js.ToString())
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で。
						//メソッドには「async」をつけてください。

						//ボタンをクリック
						await webView2.ExecuteScriptAsync("document.getElementById('buttonid1').click();");

						//ラジオボタンの２つ目をクリック
						await webView2.ExecuteScriptAsync("document.getElementsByName('radioname')[1].click();");

						//チェックボックスをクリック
						await webView2.ExecuteScriptAsync("document.getElementsByName('checkname')[0].click();");

						//リンクをクリック
						System.Text.StringBuilder js = new System.Text.StringBuilder();
						js.AppendLine("for (let i = 0; i < document.links.length; i++)");
						js.AppendLine("{");
						js.AppendLine("    if(document.links[i].innerText == 'リンク１')");
						js.AppendLine("    {");
						js.AppendLine("        document.links[i].click();");
						js.AppendLine("        break;");
						js.AppendLine("    }");
						js.AppendLine("}");
						await webView2.ExecuteScriptAsync(js.ToString());

選択

ラジオボタン／セレクトボックスを選択する方法です。

実装方法

ラジオボタン／チェックボックスの場合、操作したいHTML要素を指定してCheckedプロパティにTrue／Falseを設定します。
セレクトボックスの場合は２通りの方法があります。
操作したいセレクトボックスの要素を指定し、SelectedIndexプロパティに選択したいOptionの配列番号(0～)を設定します。
または、セレクトボックス用の中のOption要素を指定して、SelectedプロパティにTrue／Falseを設定します。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						'メソッドには「Async」をつけてください。

						'ラジオボタンの２つ目を選択
						Await WebView2.ExecuteScriptAsync("document.getElementsByName('radioname')[1].checked = true;")

						'セレクトボックスの中の３番目のオプションを選択
						Await WebView2.ExecuteScriptAsync("document.forms['testform1'].elements['selectname'][0].options[2].selected = true;")
						Await WebView2.ExecuteScriptAsync("document.forms['testform1'].elements['selectname'][0].selectedIndex = 2;")
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						//メソッドには「async」をつけてください。

						//ラジオボタンの２つ目を選択
						await webView2.ExecuteScriptAsync("document.getElementsByName('radioname')[1].checked = true;");

						//セレクトボックスの中の３番目のオプションを選択
						await webView2.ExecuteScriptAsync("document.forms['testform1'].elements['selectname'][0].options[2].selected = true;");
						await webView2.ExecuteScriptAsync("document.forms['testform1'].elements['selectname'][0].selectedIndex = 2;");

入力

テキストボックスやパスワード欄に文字を入力する方法です。

実装方法

操作したいHTML要素を指定してValueプロパティに値を設定します。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						'メソッドには「Async」をつけてください。
						
						'テキストボックスに文字を入力
						Await WebView2.ExecuteScriptAsync("document.getElementById('inputid2').value = 'テキスト２';")
		
						'パスワードに文字を入力
						Await WebView2.ExecuteScriptAsync("document.getElementsByName('passwordname')[0].value = 'password';")
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						//メソッドには「async」をつけてください。
						
						//テキストボックスに文字を入力
						await webView2.ExecuteScriptAsync("document.getElementById('inputid2').value = 'テキスト２';");
	
						//パスワードに文字を入力
						await webView2.ExecuteScriptAsync("document.getElementsByName('passwordname')[0].value = 'password';");

値の参照

テキストボックスに入力されている値やチェックボックスの選択状態などの、HTML要素に設定されている値を参照する方法です。

実装方法

HTML要素を指定してValueプロパティの値を参照します。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						'メソッドには「Async」をつけてください。
						'C#・VB側で値を受け取る方法については「https//web.biz-prog.net/readme/webview_new3.html#jstocs」を参照。

						'テキストボックスを参照
						Await WebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementById('inputid2').value);")
		
						'ラジオボタンを参照
						Await WebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementsByName('radioname')[1].checked.toString());")
		
						'チェックボックスを参照
						Await WebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementsByName('checkname')[0].checked.toString());")
		
						'セレクトボックスを参照
						Await WebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.forms['testform1'].elements['selectname'][0].options[2].selected.toString());")
						Await WebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.forms['testform1'].elements['selectname'][0].selectedIndex.toString());")
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						//メソッドには「async」をつけてください。
						//C#・VB側で値を受け取る方法については「https://web.biz-prog.net/readme/webview_new3.html#jstocs」を参照。

						//テキストボックスを参照
						await webView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementById('inputid2').value);");

						//ラジオボタンを参照
						await webView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementsByName('radioname')[1].checked.toString());");

						//チェックボックスを参照
						await webView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementsByName('checkname')[0].checked.toString());");

						//セレクトボックスを参照
						await webView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.forms['testform1'].elements['selectname'][0].options[2].selected.toString());");
						await webView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.forms['testform1'].elements['selectname'][0].selectedIndex.toString());");

Reset／Submit

formに対してreset／submitを行う方法です。

実装方法

Submit／Resetメソッドを使用します。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						'メソッドには「Async」をつけてください。

						'Reset
						Await WebView2.ExecuteScriptAsync("document.forms['testform1'].reset();")
		
						'Submit
						Await WebView2.ExecuteScriptAsync("document.forms['testform1'].submit();")
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						//メソッドには「async」をつけてください。

						//Reset
						await webView2.ExecuteScriptAsync("document.forms['testform1'].reset();");
	
						//Submit
						await webView2.ExecuteScriptAsync("document.forms['testform1'].submit();");

属性の参照・設定

要素の属性の値を参照・設定する方法です。

実装方法

getAttrbute/setAttributeメソッドで参照・設定が行えます。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						'メソッドには「Async」をつけてください。

						'info属性の値を表示
						Await WebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').getAttribute('info'));")
		
						'文字のスタイル内容を表示
						Await WebView2.ExecuteScriptAsync("document.getElementById('styleid1').setAttribute('info', 'newinfo');")
						Await WebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').getAttribute('info'));")
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						//メソッドには「async」をつけてください。

						//info属性の値を表示
						await webView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').getAttribute('info'));");
	
						//文字のスタイル内容を表示
						await webView2.ExecuteScriptAsync("document.getElementById('styleid1').setAttribute('info', 'newinfo');");
						await webView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').getAttribute('info'));");

参考

Element.getAttribute
element.setAttribute

スタイルの参照・設定

指定した要素のスタイルを設定・参照する方法です。

実装方法

StyleプロパティやgetAttrbute/setAttributeメソッドで参照・設定が行えます。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						'メソッドには「Async」をつけてください。

						'背景色を変更
						Await WebView2.ExecuteScriptAsync("document.body.style.backgroundColor = 'Red';")
		
						'文字のスタイル内容を表示
						Await WebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.cssText);")
						Await WebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').getAttribute('style'));")
		
						'文字のスタイルを変更
						Await WebView2.ExecuteScriptAsync("document.getElementById('styleid1').style.cssText ='font-size: xx-large; font-style: italic; color: red;';")
						Await WebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.cssText);")
		
						'文字のスタイルを変更２
						Await WebView2.ExecuteScriptAsync("document.getElementById('styleid1').setAttribute('style', 'font-size: large; font-style: italic; color: green;');")
						Await WebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.cssText);")
		
						'文字のスタイルを変更３
						Await WebView2.ExecuteScriptAsync("document.getElementById('styleid1').style.color ='black';")
						Await WebView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.color);")
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						//メソッドには「async」をつけてください。

						//背景色を変更
						await webView2.ExecuteScriptAsync("document.body.Style.backgroundColor = 'Red';");
	
						//文字のスタイル内容を表示
						await webView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.cssText);");
						await webView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').getAttribute('style'));");
	
						//文字のスタイルを変更
						await webView2.ExecuteScriptAsync("document.getElementById('styleid1').style.cssText ='font-size: xx-large; font-style: italic; color: red;';");
						await webView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.cssText);");
	
						//文字のスタイルを変更２
						await webView2.ExecuteScriptAsync("document.getElementById('styleid1').setAttribute('style', 'font-size: large; font-style: italic; color: green;');");
						await webView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.cssText);");
	
						//文字のスタイルを変更３
						await webView2.ExecuteScriptAsync("document.getElementById('styleid1').style.color ='black';");
						await webView2.ExecuteScriptAsync("alert(document.getElementById('styleid1').style.color);");

参考

ElementCSSInlineStyle.style