單擊並突出顯示的C＃Web瀏覽器

Question

在我開始編寫代碼之前，我想知道是否有人知道任何已經構建的開源代碼（或付費代碼）。

我在尋找一個瀏覽器控件，用戶可以預覽一個網頁，然後突出顯示它的元素，一旦突出顯示，我就可以得到所選元素的div或id。

有沒有人見過這樣的事情？

Answer 1

下面是使用.NET WebBrowser控件的粗略版本，該控件使用Internet Explorer。

namespace WindowsFormsApplication1 
{ 
    using System; 
    using System.Collections.Generic; 
    using System.Diagnostics; 
    using System.Windows.Forms; 

    public partial class Form1 : System.Windows.Forms.Form 
    { 
     private HtmlDocument document; 

     private IDictionary<HtmlElement, string> elementStyles = new Dictionary<HtmlElement, string>(); 

     public Form1() 
     { 
      InitializeComponent(); 
     } 

     private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) 
     { 
      this.Text = e.Url.ToString(); 
      this.document = this.webBrowser1.Document; 
      this.document.MouseOver += new HtmlElementEventHandler(document_MouseOver); 
      this.document.MouseLeave += new HtmlElementEventHandler(document_MouseLeave); 
     } 

     private void document_MouseLeave(object sender, HtmlElementEventArgs e) 
     { 
      HtmlElement element = e.FromElement; 
      if (this.elementStyles.ContainsKey(element)) 
      { 
       string style = this.elementStyles[element]; 
       this.elementStyles.Remove(element); 
       element.Style = style; 
      } 
     } 

     private void document_MouseOver(object sender, HtmlElementEventArgs e) 
     { 
      HtmlElement element = e.ToElement; 
      if (!this.elementStyles.ContainsKey(element)) 
      { 
       string style = element.Style; 
       this.elementStyles.Add(element, style); 
       element.Style = style + "; background-color: #ffc;"; 
       this.Text = element.Id ?? "(no id)"; 
      } 
     } 
    } 
} 

Answer 2

我有類似的需求，最初發布的代碼是一個巨大的幫助。我想返回原作者的好意。

提供的答案不足。它只回答請求的第一部分：突出顯示呈現的HTML。它不能解決請求的後半部分，C＃程序可以知道哪個節點被選中。

隨着鼠標進入窗體並朝向所需渲染區域移動，高亮顯示將隨鼠標移動。這意味着可能會有許多HTML元素被鼠標訪問。

那麼C＃如何告訴用戶想要哪個元素？

該程序必須允許用戶點擊所需的渲染區域。點擊應該被C＃程序困住。另外，C＃應該禁止傳遞給元素的點擊（例如，如果它的Anchor元素不希望點擊遵循鏈接）。

我在我的程序解決了這個如下：

（1）在「文檔完整的」事件中，我在文檔級別添加click事件陷阱（只有一次的文件）：

 HtmlDocument htmlDoc = webBrowser.Document; 

     _document = webBrowser.Document; 

     //-- add our handler only once 
     if (!_documentHandlers.Contains(_document)) 
     { 
      _document.MouseOver += new HtmlElementEventHandler(document_MouseOver); 
      _document.MouseLeave += new HtmlElementEventHandler(document_MouseLeave); 

      mshtml.HTMLDocumentEvents2_Event iEvent; 
      IHTMLDocument2 currentDoc = (IHTMLDocument2) webBrowser.Document.DomDocument; 

      iEvent = (mshtml.HTMLDocumentEvents2_Event) currentDoc; 
      iEvent.onclick += new mshtml.HTMLDocumentEvents2_onclickEventHandler(clickDocumentHandler); 

      _documentHandlers.Add(_document); 
     } 

對於同一文檔，可以多次觸發「文檔已完成」事件（請嘗試CNN.com）。 '_documentHandlers'變量是一個HashSet，以確保我們只在給定文檔中添加一次處理程序。

（2）我也選擇在單元級別捕捉點擊。在 '鼠標' 我補充說：

   mshtml.HTMLElementEvents2_Event iEvent; 
       iEvent = element.DomElement as mshtml.HTMLElementEvents2_Event; 
       if (iEvent == null) 
        return; 
       iEvent.onclick += new mshtml.HTMLElementEvents2_onclickEventHandler(clickElementHandler); 

，並在 '鼠標離開' 我註銷單擊處理：

   mshtml.HTMLElementEvents2_Event iEvent; 
       iEvent = element.DomElement as mshtml.HTMLElementEvents2_Event; 
       if (iEvent == null) 
        return; 
       iEvent.onclick -= new mshtml.HTMLElementEvents2_onclickEventHandler(clickElementHandler); 

（3）單擊處理程序很簡單：

private bool clickDocumentHandler(IHTMLEventObj pEvtObj) 
    { 
     IHTMLElement element = (mshtml.IHTMLElement)pEvtObj.srcElement; 

     pEvtObj.cancelBubble = true; 
     pEvtObj.returnValue = false; 

     return false; 
    } 

    private bool clickElementHandler(IHTMLEventObj pEvtObj) 
    { 
     IHTMLElement element = (mshtml.IHTMLElement)pEvtObj.srcElement; 

     pEvtObj.cancelBubble = true; 
     pEvtObj.returnValue = false; 

     return false; 
    } 

請注意，它們會取消冒泡事件並返回「false」值以防止點擊向上滲透。

在這些處理程序中，您可以添加特定的代碼以保存被單擊的元素，然後在應用程序的其他地方使用它。

請注意，在元素級別，並非每個IHTMLElement都支持onclick處理程序，因此需要檢查null。

-Enjoy 大衛