WebView2　応用テクニック

jQueryを使ってDOM操作を行う

WebView2コントロールでのDOM操作はJavaScriptを使いますので、jQueryを使えばもっと楽に様々な操作が行えます。
操作するWebページにjQueryが読み込まれている必要がありますが、読み込まれていなければ動的に読み込ませることができます。

サンプル

DOM操作をJavaScriptで記述した場合と、jQueryで記述した場合の比較が以下になります。 

						Private Async Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

							'JavaScriptの外部ファイルを動的に読み込み
							Dim js As New System.Text.StringBuilder()
							js.AppendLine("var sc = document.createElement('script');")
							js.AppendLine("sc.src = 'https://code.jquery.com/jquery-3.4.1.min.js';")
							js.AppendLine("document.body.appendChild(sc);")
							Await webView2.ExecuteScriptAsync(js.ToString())
					
						End Sub
					
						Private Async Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
					
							'idを指定してアクセス
							'Await webView2.ExecuteScriptAsync("document.getElementById('inputid1').value = 'テキスト1';")
							Await webView2.ExecuteScriptAsync("$('#inputid1').val('テキスト1');")
					
							'name属性を指定してアクセス
							'Await webView2.ExecuteScriptAsync("document.getElementsByName('inputname')(1).value = 'テキスト2';")
							Await webView2.ExecuteScriptAsync("$('[name=inputname]').eq(1).val('テキスト2');")
					
							'class属性を指定してアクセス
							'Await webView2.ExecuteScriptAsync("document.getElementsByClassName('inputclass')(2).value = 'テキスト3';")
							Await webView2.ExecuteScriptAsync("$('.inputclass').eq(2).val('テキスト3');")
					
							'タグを指定してアクセス
							'Await webView2.ExecuteScriptAsync("document.getElementsByTagName('input')(3).value = 'password';")
							Await webView2.ExecuteScriptAsync("$('input').eq(3).val('password');")
					
						End Sub
					
						private async void button1_Click(object sender, EventArgs e)
						{
							//JavaScriptの外部ファイルを動的に読み込み
							var js = new StringBuilder();
							js.AppendLine("var sc = document.createElement('script');");
							js.AppendLine("sc.src = 'https://code.jquery.com/jquery-3.4.1.min.js';");
							js.AppendLine("document.body.appendChild(sc);");
							await webView2.ExecuteScriptAsync(js.ToString());
						}
				
						private async void button2_Click(object sender, EventArgs e)
						{
							//idを指定してアクセス
							//await webView2.ExecuteScriptAsync("document.getElementById('inputid1').value = 'テキスト1';");
							await webView2.ExecuteScriptAsync("$('#inputid1').val('テキスト1');");
				
							//name属性を指定してアクセス
							//await webView2.ExecuteScriptAsync("document.getElementsByName('inputname')[1].value = 'テキスト2';");
							await webView2.ExecuteScriptAsync("$('[name=inputname]').eq(1).val('テキスト2');");
				
							//class属性を指定してアクセス
							//await webView2.ExecuteScriptAsync("document.getElementsByClassName('inputclass')[2].value = 'テキスト3';");
							await webView2.ExecuteScriptAsync("$('.inputclass').eq(2).val('テキスト3');");
				
							//タグを指定してアクセス
							//await webView2.ExecuteScriptAsync("document.getElementsByTagName('input')[3].value = 'password';");
							await webView2.ExecuteScriptAsync("$('input').eq(3).val('password');");
						}

参考