Web 浏览器控件更改属性

本文关键字:属性 控件 浏览器 Web | 更新日期: 2023-09-27 18:34:38

WebBrowser Control似乎在设置 webBrowser1.DocumentText 时重新排列 HTML 标记中的属性。

我想知道是否缺少某种渲染模式或文档编码。 我的问题可以通过简单地将RichTextBoxControl(txt_htmlBody(和WebBrowser控件(webBrowser1(添加到Windows窗体中来查看。

添加 webBrowser1 Web 浏览器控件,并添加事件处理程序; webBrowser1_DocumentCompleted

我使用它将鼠标单击事件添加到 Web 浏览器控件。

  private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
    {
        // Attach an event to handle mouse clicks on the web browser
        this.webBrowser1.Document.Body.MouseDown += new HtmlElementEventHandler(Body_MouseDown);
    }

在鼠标点击事件中,我们得到像这样点击的元素;

   private void Body_MouseDown(Object sender, HtmlElementEventArgs e)
    {
        // Get the clicked HTML element
        HtmlElement elem = webBrowser1.Document.GetElementFromPoint(e.ClientMousePosition);
        if (elem != null)
        {
            highLightElement(elem);
        }
    }
    private void highLightElement(HtmlElement elem)
    {
        int len = this.txt_htmlBody.TextLength;
        int index = 0;
        string textToSearch = this.txt_htmlBody.Text.ToLower(); // convert everything in the text box to lower so we know we dont have a case sensitive issues
        string textToFind = elem.OuterHtml.ToLower();
        int lastIndex = textToSearch.LastIndexOf(textToFind); 
        // We cant find the text, because webbrowser control has re-arranged attributes in the <img> tag
        // Whats rendered by web browser: "<img border=0 alt='"'" src='"images/promo-green2_01_04.jpg'" width=393 height=30>"
        // What was passed to web browser from textbox: <img src="images/PROMO-GREEN2_01_04.jpg" width="393" height="30" border="0" alt=""/>
        // As you can see, I will never be able to find my data in the source because the webBrowser has changed it
    }

向窗体添加txt_htmlBody RichTextBox,并设置 RichTextBox 事件的 TextChanged 以在RichTextBox (txt_htmlBody( 文本更改时设置WebBrowser1.DocumentText

   private void txt_htmlBody_TextChanged(object sender, EventArgs e)
    {
        try
        {
            webBrowser1.DocumentText = txt_htmlBody.Text.Replace("'n", String.Empty);
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.Message);
        }
    }

运行程序时,将以下示例 HTML 复制到txt_htmlBody中,然后单击右侧的图像并调试 highLightElement。您将通过我的赞叹看到为什么我在搜索字符串中找不到指定的文本,因为WebBrowser控件会重新排列属性。

<img src="images/PROMO-GREEN2_01_04.jpg" width="393" height="30" border="0" alt=""/>

有谁知道如何使Web浏览器控件按原样呈现我的HTML?

谢谢你的时间。

Web 浏览器控件更改属性

当您通过 element.OuterHtml 获取时,您不能期望处理后的 HTML 与原始源 1:1 相同。无论渲染模式如何,它几乎永远不会相同。

但是,尽管属性可能已被重新排列,但它们的名称和值仍然相同,因此您只需要改进搜索逻辑(例如,通过遍历 DOM 三或简单地通过 HtmlDocument.All 枚举元素并通过 HtmlElement.GetAttribute 检查其属性(。