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

【问题标题】：NET webbrowser - get HTML element ID by clicking on imageNET webbrowser - 通过单击图像获取 HTML 元素 ID
【发布时间】：2017-09-11 03:06:01
【问题描述】：

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

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

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

我已经在这里到处寻找解决方案，但找不到任何相关的东西。

【问题讨论】：

如果您不希望页面中有任何 javascript 代码，可能与 .Net How to get the ID of the clicked Element in a Webbrowser 重复。如果您对 jsavascript 单击处理程序感到满意，WinForms - How do I execute C# application code from inside WebBrowser control? 的可能重复项。
谢谢，虽然已经看过并测试了第一个。它似乎需要使用 webbrowser 上下文菜单而不是鼠标左键，这正是我正在寻找的。span>
如果没有其他方法，JavaScript 可能会起作用。除了用户可能在 IE 中禁用了 javascript 之外，这还有什么缺点吗？

标签： c# winforms webbrowser-control

【解决方案1】：

您可以动态附加到图像的 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"));
    }
}

【讨论】：

好吧，这正是我想要的。太好了，谢谢！

【解决方案2】：

简单的方法是使用浏览器导航。单击时可以导航到特殊 URL，然后处理 Navigating 事件，如果 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;
    }
}

【讨论】：

它是数据库项目的一部分，所有数据都是本地的。我一直在考虑类似的事情 - 导航到另一个 webbrowser 实例而不是打开 IE（我有那个代码），然后从那里获取 Uri。
据我了解您使用的是网络浏览器控件，如果是这样，导航将在同一实例中发生，如果您取消导航，用户将永远不会注意到任何导航
好吧，这段代码似乎适用于 WPF（在那里工作），但 WinForms 似乎不支持 NavigatingCancelEventArgs。
@Rado 现在创建一个获胜表单版本将很快发布，应该仍然有效。
@Rado 添加了一个 winforms 版本，事件 arg 类型不同，但技术的工作方式几乎相同。