質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

WebViewを用いてブラウザを操作したい。

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 543

waou2010

score 1

前提・実現したいこと

C# で Windowsフォームアプリを作成しています。 

webBrowserコントロールからデーターを取得したりデータを設定したりは次のように簡単に行うことができます。 

IDがAからデータを取得
HtmlElement element = webBrowser1.Document.GetElementById("A");
textBox1.Text = element.InnerText;

IDがAへデータを渡す
HtmlElement usernameButton = webBrowser1.Document.GetElementById("A");
usernameButton.SetAttribute("value", "定形郵便");

今回、次のサイトを参考にwebBrowserの代わりにWebViewを用いてwebページを表示させました。
https://miko.info/?p=1372

このWebViewを使いwebBrowserと同じようにブラウザ上のコントロールの操作を行いたいのですが、WebViewのクラスを見てもHtmlElementのようなクラスはなく、途方に暮れてしまいました。

こうしたデータの取得、設定をWebViewで行うことはできないでしょうか。 

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

ちょうど微妙な時期なのですが、WebView2(いわゆる Chromium Edge)がそろそろ正式リリースされるはずです(まだプレビュー)
既にWebViewにはObsoleteAttribute が付いており、あまり使わせたくないのかもしれません^^;
WebViewWebView2は互換性もなく非常に悩ましいです。

WebView2を試す場合は下記の上で、Microsoft.Web.WebView20.9.538-prereleaseにダウングレードしてください(理由は不明だがそうしないと手順通りにできない)
Microsoft Edge WebView 2 Windows フォームアプリ - Microsoft Edge Development | Microsoft Docs

使用例

using System;
using System.Diagnostics;
using System.Windows.Forms;
using Microsoft.Toolkit.Forms.UI.Controls;
using Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT;
using Microsoft.Web.WebView2.Core;
using Microsoft.Web.WebView2.WinForms;

namespace Questions274706
{
    public partial class Form1 : Form
    {
        private readonly WebView webView; // Warning CS0618 Obsolete付けるのはまだ早い気がするが^^;
        private readonly WebView2 webView2;

        public Form1()
        {
            InitializeComponent();

            var panel = new TableLayoutPanel
            {
                ColumnCount = 2,
                RowCount = 1,
                Dock = DockStyle.Fill,
            };
            panel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50F));
            panel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50F));
            Controls.Add(panel);

            webView = new WebView
            {
                Source = new Uri("https://teratail.com/questions/274706"),
                Dock = DockStyle.Fill,
            };
            webView.NavigationCompleted += WebView_NavigationCompleted;
            panel.Controls.Add(webView, 0, 0);


            webView2 = new WebView2
            {
                Source = new Uri("https://teratail.com/questions/274706"),
                Dock = DockStyle.Fill,
            };
            webView2.NavigationCompleted += WebView2_NavigationCompleted;
            panel.Controls.Add(webView2, 1, 0);
        }

        private void WebView_NavigationCompleted(object sender, WebViewControlNavigationCompletedEventArgs e)
        {
            // InvokeScriptAsyncもある
            var result = webView.InvokeScript("eval", new string[] { "document.getElementById('l-mainContents').innerText" });
            Debug.WriteLine(result);

            var t = "定形郵便";
            webView.InvokeScript("eval", new string[] { $"document.getElementById('boxSearch-query').setAttribute('value','{t}');" });
        }

        private async void WebView2_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
        {
            // ExecuteScriptはない
            var result = await webView2.ExecuteScriptAsync("document.getElementById('l-mainContents').innerText");
            Debug.WriteLine(result);

            var t = "定形郵便";
            await webView2.ExecuteScriptAsync($"document.getElementById('boxSearch-query').setAttribute('value','{t}');");
        }
    }
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/03 16:24

    WebView2について、了解いたしました。また、詳しい使用例大変参考になりました。トライして行きたいと思います。ありがとうございました。

    キャンセル

0

こうしたデータの取得、設定をWebViewで行うことはできないでしょうか。 

WebView には WebBrowser で使った GetElementById などの直接 DOM 操作できるメソッド・プロパティは無いそうで、代わりに JavaScript のコードを使って Web ページを操作します。

ググるとやり方を書いた記事がいろいろヒットすると思います。例えば下記。

WebViewコントロールでの操作
https://web.biz-prog.net/readme/webview2.html

自分でもググってみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/03 16:27

    JavaScriptについて、あくまでもJavaScriptのwebページに関する操作と勘違いしていました。 参考になりました。大変ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る