NET webbrowser - get HTML element ID by clicking on image

问题

I have a C# winform project with a webbrowser control. I'm loading an HTML page with images into the webbrowser. Each image has a different ID:

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

Is there a way to pass the ID into a variable when clicking on the image so I can use the ID in my code? The path to the image can also be used as I can extract the number from there.

I have already searched here there and everywhere for a solution but can't find anything related.

回答1:

You can dynamically attach to image's onClick event.

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:

On simple way would be to use browser navigation. When clicking you can navigate to a special URL, then you handle the Navigating event and if the url is the special url you cancel the navigation and handle the data.

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;
    }
}

This works if you have some control over the HTML. You could also set the URL from JS if you don't want to add the anchor.

Edit

The above version is for a WPF application. The winforms version is as follows:

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;
    }
}

来源：https://stackoverflow.com/questions/46133965/net-webbrowser-get-html-element-id-by-clicking-on-image

标签

winforms

webbrowser-control