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

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

目次

クリック

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

実装方法

WebView2コントロールのDOM操作はJavaScriptを使います。
操作したいHTML要素を指定してClickメソッドをコールします。
そうすればマウスでクリックしたときと同様の動作が行われます。

サンプル

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

						'ラジオボタンの2つ目をクリック
						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 == 'リンク1')")
						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();");

						//ラジオボタンの2つ目をクリック
						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 == 'リンク1')");
						js.AppendLine("    {");
						js.AppendLine("        document.links[i].click();");
						js.AppendLine("        break;");
						js.AppendLine("    }");
						js.AppendLine("}");
						await webView2.ExecuteScriptAsync(js.ToString());
					

選択

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

実装方法

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

サンプル

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

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

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

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

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

入力

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

実装方法

WebView2コントロールのDOM操作はJavaScriptを使います。
操作したいHTML要素を指定してValueプロパティに値を設定します。

サンプル

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

参照

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

実装方法

WebView2コントロールのDOM操作はJavaScriptを使います。
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.CoreWebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementById('inputid2').value);")
		
						'ラジオボタンを参照
						Await WebView2.CoreWebView2.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'].options[2].selected.toString());")
						Await WebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.forms['testform1'].elements['selectname'].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.CoreWebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementById('inputid2').value);");

						//ラジオボタンを参照
						await webView2.CoreWebView2.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'].options[2].selected.toString());");
						await webView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.forms['testform1'].elements['selectname'].selectedIndex.toString());");
					

Reset/Submit

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

実装方法

WebView2コントロールのDOM操作はJavaScriptを使います。
Submit/Resetメソッドを使用します。

サンプル

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

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

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

属性の参照・設定

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

実装方法

WebView2コントロールのDOM操作はJavaScriptを使います。
getAttrbute/setAttributeメソッドで参照・設定が行えます。

サンプル

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

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

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

参考

スタイルの参照・設定

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

実装方法

WebView2コントロールのDOM操作はJavaScriptを使います。
StyleプロパティやgetAttrbute/setAttributeメソッドで参照・設定が行えます。

サンプル

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

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

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

参考