NET webbrowser - 通过单击图像获取 HTML 元素 ID

Question

我有一个带有网络浏览器控件的 C# winform 项目。我正在将包含图像的 HTML 页面加载到网络浏览器中。每张图片都有不同的 ID：

<img src="F:\Temp\file12948.jpg" id="12948" width="180px">

有没有办法在单击图像时将 ID 传递给变量，以便我可以在我的代码中使用该 ID？也可以使用图像的路径，因为我可以从那里提取数字。

我已经到处搜索解决方案，但找不到任何相关内容。

Answer 1

简单的方法是使用浏览器导航。单击时可以导航到特殊的 URL，然后处理导航事件，如果 url 是特殊的 url，则取消导航并处理数据。

public MainWindow()
{
    InitializeComponent();
    br.NavigateToString(@"<a href=""http://messages?id=12948""><img src=""F:\Temp\file12948.jpg"" id=""12948"" width=""180px"" ></a>");
    br.Navigating += this.Br_Navigating;
}

private void Br_Navigating(object sender, NavigatingCancelEventArgs e)
{
    if(e.Uri.Host == "messages")
    {
        MessageBox.Show(e.Uri.Query);
        e.Cancel = true;
    }
}

如果您对 HTML 有一定的控制权，则此方法有效。如果您不想添加锚点，也可以从 JS 设置 URL。

编辑

以上版本适用于 WPF 应用程序。 winforms版本如下：

public Form1()
{
    InitializeComponent();
    webBrowser1.DocumentText = @"<a href=""http://messages?id=12948""><img src=""F:\Temp\file12948.jpg"" id=""12948"" width=""180px"" ></a>";
    webBrowser1.Navigating += this.webBrowser1_Navigating;

}

private void webBrowser1_Navigating(object sender, WebBrowserNavigatingEventArgs e)
{
    if (e.Url.Host == "messages")
    {
        MessageBox.Show(e.Url.Query);
        e.Cancel = true;
    }
}

Answer 2

您可以动态附加到图像的 onClick 事件。

public class TestForm : Form
{
    WebBrowser _WebBrowser = null;
    public TestForm()
    {
        _WebBrowser = new WebBrowser();
        _WebBrowser.ScriptErrorsSuppressed = true;
        _WebBrowser.Dock = DockStyle.Fill;
        this.Controls.Add(_WebBrowser);

        WebBrowserDocumentCompletedEventHandler Completed = null;

        Completed = (s, e) =>
        {
            //add onclick event dynamically
            foreach (var img in _WebBrowser.Document.GetElementsByTagName("img").OfType<HtmlElement>())
            {
                img.AttachEventHandler("onclick", (_, __) => OnClick(img));
            }

            _WebBrowser.DocumentCompleted -= Completed;
        };

        _WebBrowser.DocumentCompleted += Completed;

        var imgurl = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png";
        //_WebBrowser.Navigate("http://edition.cnn.com/2017/09/09/us/hurricane-irma-cuba-florida/index.html");
        _WebBrowser.DocumentText = $"<html>  <img src='{imgurl}' id=123 />  </html>";
    }

    void OnClick(HtmlElement img)
    {
        MessageBox.Show(img.GetAttribute("id"));
    }
}

NET webbrowser - 通过单击图像获取 HTML 元素 ID

NET webbrowser - get HTML element ID by clicking on image

c#

webbrowser-control

winforms