C# Navegador web con hacer clic y resaltar

Question

Antes de salir y codificar esto, pensé que vería si alguien aquí sabe de cualquier equivalente de código abierto (o pagado) ya construido.

Estoy buscando un control del navegador donde los usuarios puedan obtener una vista previa de una página web y luego resaltar elementos de ella y una vez resaltada, puedo obtener el div o id del elemento seleccionado.

¿Alguien ha visto algo así?

Answer 1

Aquí hay una versión cruda usando el control .NET WebBrowser, que usa 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

Tuve una necesidad similar y el código publicado originalmente fue de gran ayuda. Me gustaría devolver la amabilidad del autor original.

La respuesta proporcionada es insuficiente. Solo responde la primera parte de la solicitud: resaltar el HTML renderizado. No resuelve la segunda mitad de la solicitud donde el programa C# puede indicar qué nodo se selecciona.

A medida que el mouse ingresa el formulario y se mueve hacia el área renderizada deseada, lo más destacado seguirá al mouse. Esto significa que potencialmente muchos elementos HTML serán visitados por el mouse.

Entonces, ¿cómo puede el C# decir qué elemento quiere el usuario?

El programa debe permitir al usuario hacer clic en el área renderizada deseada. El clic debe quedar atrapado por el programa C#. Además, el C# debe desactivar el clic que se entrega al elemento (por ejemplo, si es un elemento Anchor, no desea que el clic siga el enlace).

He resuelto esto en mi programa de la siguiente manera:

(1) En el caso de 'documento completo' añadí una trampa (sólo una vez por el documento) para el evento click a nivel de documento:

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

El evento 'completado' puede activarse varias veces para el mismo documento (pruebe CNN.com). La variable '_documentHandlers' es un HashSet para garantizar que solo agreguemos el manejador una vez por cada documento.

(2) También elegí atrapar el clic en el nivel del elemento. En el 'ratón sobre añadí:

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

y en el 'permiso de ratón' Yo no registrado el controlador de clic:

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

(3) el clic manipuladores son simples:

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

Tenga en cuenta que cancelan el borboteo del evento y devuelven un valor de 'falso' para evitar que el clic se filtre hacia arriba.

En estos controladores puede agregar su código específico para guardar el elemento al que se hace clic y luego usarlo en otro lugar de su aplicación.

Tenga en cuenta que a nivel del elemento, no todos los IHTMLElement son compatibles con un controlador onclick por lo tanto, la comprobación de null.

-Disfrute David