WebViewコントロール(MAUI)によるHTML要素の操作
テキストボックスに文字を入力したりボタンをクリックするなど、HTML要素を操作する方法について説明します。
HTML要素を指定する方法については要素の指定を参照してください。
目次
WebViewコントロール(MAUI)のHTML要素へのアクセス方法について
WebViewコントロール(MAUI)にはDOMを直接操作するメソッドはありません。
代わりの手段としてEvaluateJavaScriptAsyncメソッドを使います。
EvaluateJavaScriptAsyncメソッドは、表示しているWebページに対してJavaScriptを実行できますので、
JavaScriptでDOMを操作するコードを作成し、実行してやります。
※WebViewコントロール(MAUI)でのJavaScript実行についてはこちらを参照。
クリック
ボタン／ラジオボタン／チェックボックス／リンク等をクリックする方法です。
実装方法
JavaScriptでクリックしたい要素を指定してClickメソッドを実行します。
そうすればマウスでクリックしたときと同じようにクリックが行われます。
サンプル
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で。
//メソッドには「async」をつけてください。
//ボタンをクリック
await MyWebView.EvaluateJavaScriptAsync("document.getElementById('buttonid1').click();");
////ラジオボタンの２つ目をクリック
await MyWebView.EvaluateJavaScriptAsync("document.getElementsByName('radioname')[1].click();");
//チェックボックスをクリック
await MyWebView.EvaluateJavaScriptAsync("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 MyWebView.EvaluateJavaScriptAsync(js.ToString());
選択
ラジオボタン／セレクトボックスを選択する方法です。
実装方法
JavaScriptで要素を指定し、選択用の操作を実行します。
ラジオボタン／チェックボックスの場合、要素を指定してCheckedプロパティにTrue／Falseを設定します。
セレクトボックスの場合は２通りの方法があります。
セレクトボックスの要素を指定し、SelectedIndexプロパティに選択したいOptionの配列番号(0～)を設定します。
または、セレクトボックスの中のOption要素を指定して、SelectedプロパティにTrue／Falseを設定します。
サンプル
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//メソッドには「async」をつけてください。
//ラジオボタンの２つ目を選択
await MyWebView.EvaluateJavaScriptAsync("document.getElementsByName('radioname')[1].checked = true;");
//セレクトボックスの中の３番目のオプションを選択
await MyWebView.EvaluateJavaScriptAsync("document.forms['testform1'].elements['selectname'][0].options[2].selected = true;");
//セレクトボックスの中の３番目のオプションを選択
await MyWebView.EvaluateJavaScriptAsync("document.forms['testform1'].elements['selectname'][0].selectedIndex = 2;");
入力
テキストボックスやパスワード欄に文字を入力する方法です。
実装方法
操作したいHTML要素を指定してValueプロパティに値を設定します。
サンプル
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//メソッドには「async」をつけてください。
//テキストボックスに文字を入力
await MyWebView.EvaluateJavaScriptAsync("document.getElementById('inputid2').value = 'テキスト２';");
//パスワードに文字を入力
await MyWebView.EvaluateJavaScriptAsync("document.getElementsByName('passwordname')[0].value = 'password';");
値の参照
テキストボックスに入力されている値やチェックボックスの選択状態などの、HTML要素に設定されている値を参照する方法です。
実装方法
HTML要素を指定してValueプロパティの値を参照します。
サンプル
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//メソッドには「async」をつけてください。
//テキストボックスを参照
await MyWebView.EvaluateJavaScriptAsync("alert('textbox:' + document.getElementById('inputid2').value);");
//ラジオボタンを参照
await MyWebView.EvaluateJavaScriptAsync("alert('radio:' + document.getElementsByName('radioname')[1].checked.toString());");
//チェックボックスを参照
await MyWebView.EvaluateJavaScriptAsync("alert('checkbox:' + document.getElementsByName('checkname')[0].checked.toString());");
//セレクトボックスを参照
await MyWebView.EvaluateJavaScriptAsync("alert(document.forms['testform1'].elements['selectname'][0].options[2].selected.toString());");
await MyWebView.EvaluateJavaScriptAsync("alert(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 MyWebView.EvaluateJavaScriptAsync("document.forms['testform1'].reset();");
//Submit
await MyWebView.EvaluateJavaScriptAsync("document.forms['testform1'].submit();");
属性の参照・設定
要素の属性の値を参照・設定する方法です。
実装方法
WebView2コントロールのDOM操作はJavaScriptを使います。
getAttrbute/setAttributeメソッドで参照・設定が行えます。
サンプル
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//メソッドには「async」をつけてください。
//info属性の値を表示
await MyWebView.EvaluateJavaScriptAsync("alert(document.getElementById('styleid1').getAttribute('info'));");
//文字のスタイル内容を表示
await MyWebView.EvaluateJavaScriptAsync("document.getElementById('styleid1').setAttribute('info', 'newinfo');");
await MyWebView.EvaluateJavaScriptAsync("alert(document.getElementById('styleid1').getAttribute('info'));");
参考
スタイルの参照・設定
指定した要素のスタイルを設定・参照する方法です。
実装方法
StyleプロパティやgetAttrbute/setAttributeメソッドで参照・設定が行えます。
サンプル
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
//メソッドには「async」をつけてください。
//背景色を変更
await MyWebView.EvaluateJavaScriptAsync("document.body.Style.backgroundColor = 'Red';");
//文字のスタイル内容を表示
await MyWebView.EvaluateJavaScriptAsync("alert(document.getElementById('styleid1').style.cssText);");
await MyWebView.EvaluateJavaScriptAsync("alert(document.getElementById('styleid1').getAttribute('style'));");
//文字のスタイルを変更
await MyWebView.EvaluateJavaScriptAsync("document.getElementById('styleid1').style.cssText ='font-size: xx-large; font-style: italic; color: red;';");
await MyWebView.EvaluateJavaScriptAsync("alert(document.getElementById('styleid1').style.cssText);");
//文字のスタイルを変更２
await MyWebView.EvaluateJavaScriptAsync("document.getElementById('styleid1').setAttribute('style', 'font-size: large; font-style: italic; color: green;');");
await MyWebView.EvaluateJavaScriptAsync("alert(document.getElementById('styleid1').style.cssText);");
//文字のスタイルを変更３
await MyWebView.EvaluateJavaScriptAsync("document.getElementById('styleid1').style.color ='black';");
await MyWebView.EvaluateJavaScriptAsync("alert(document.getElementById('styleid1').style.color);");