Tomar valor usando EdgeBrowser

[MAXIUM]

Pues eso. Quisiera coger valores de una web usando EdgeBrowser y no sé como

[dec]

Hola a todos,

¿A qué te refieres con "valores"? ¿El valor de un determinado "HTML input"? ¿Puedes detallar un poco?

[MAXIUM]

Empezado por dec

Hola a todos,

¿A qué te refieres con "valores"? ¿El valor de un determinado "HTML input"? ¿Puedes detallar un poco?

Gracias Dec por responder.

Un ejemplo, si cargo ESTA pagina, debajo de nick dice Moderador. ¿Como puedo coger Moderador para luego cargarlo en un Memo por ejemplo? O si quiera coger el tipo de todos los miembros que aparezcan en esta web.

[chenech]

No lo he usado para esto que preguntas, pero creo que con NetHTTPClient1->Get("www.clubdelphi.com", stream) puedes descargarla y tratarla en un memo, string, stream, etc.
Quizás sea mas fácil que con EdgeBrowser.

[dec]

Hola a todos,

Lo que propone el compañero chenech puede ser una opción, es decir, obtener el HTML de una página, y, ya desde Delphi, "parsear" dicho HTML en busca de lo que necesites. Ahora bien, supongamos que lo que queremos obtener es el valor que un determinado usuario ha puesto en un "HTML input", en este caso, el HTML que nosotros obtengamos, nunca contendrá dicho valor, pues no figura en el HTML original de la página, que, es lo que nosotros podemos obtener y "parsear".

Sin embargo, como digo, lo que comenta el compañero podría ser suficiente para lo que quieres conseguir, sabiendo que tendrás que "parsear" el HTML utilizando el propio Delphi. Ahora bien, tenemos que ir por partes. En primer lugar, si estamos hablando de una página o documento HTML que corre en nuestra app dentro de un componente "TEdgeBrowser", en este caso, acaso podríamos obtener el HTML de alguna forma (que voy a obviar aquí, puesto que ahora mismo no la conozco), pero, también podríamos aprovecharnos de Javascript para realizar el trabajo.

La cosa puede resultar más complicada de lo que se piensa acaso, porque, por ejemplo, lo que has dicho de obtener el valor "Moderador", sería bastante complicado. Verás porqué. Cuando digo que podemos utilizar Javascript para buscar lo que necesitemos, en efecto, esto puede ser una gran ayuda, pero, aún así, Javascript no funciona "solo", por decirlo así. Trataré de explicarme. Lo primero que tendríamos que ver es dónde se sitúa, dentro del HTML, el valor que queremos obtener. Siguiendo con el ejemplo de obtener "Moderador", tenemos el siguiente extracto HTML de esta página:

<td nowrap="nowrap">
 <div id="postmenu_548643">		
  <a class="bigusername" href="member.php?u=4681">dec</a>
  <img class="inlineimg" src="images/statusicon/user_offline.gif" alt="dec is offline" border="0" />
 </div>	
 <div class="smallfont">Moderador</div>	
</td>

Ok, estamos viendo dónde se encuentra la palabra / cadena "Moderador", sin embargo, ¿cómo podríamos encontrar dicha palabra utilizando Javascript? La cosa no es tan sencilla. Lo primero que puede ocurrírsenos es utilizar la clase "smallfont" como "selector", puesto que "Moderador" se encuentra dentro de un elemento "DIV" cuyo contenido es lo que estamos buscando: "Moderador". Sin embargo, si uno revisa el resto del HTML de esta página, la clase "smallfont" se utiliza en otros lugares también, de modo que, a bote pronto, el asunto se complica bastante.

Tal vez, para obtener "Moderador", podríamos utilizar el siguiente selector ".nowrap .smallfont", es decir, "buscamos algo que debe estar en un elemento con clase "nowrap", que, a su vez, contiene un elemento con clase "smallfont". Sin embargo, ¿habrá otros elementos que se encuentren con el mismo selector en la página? Es muy posible... por lo tanto, estamos viendo que no es tan sencillo como se plantea en un principio: dicho de otra forma, no es lo mismo obtener el valor de un "HTML input" que esté identificado (que tenga un atributo ID determinado, y, que, en principio, debe ser único en el documento HTML), no es lo mismo esto, que, tratar de obtener una "cadena arbitraria", puesto que, de una forma o de otra, tenemos que poder averiguar dónde se encuentra dicha cadena, pero, saberlo además de una forma unívoca, por decirlo así.

Por otro lado, puede haber varias formas de llegar al mismo objetivo, y, todas ellas requieren de cierta "base", por decirlo así: no es tan simple como decir "quiero este valor", sino que, hay que hacer varias cosas antes de poder llegar a ese objetivo. Yo voy a adjuntar a este "post" un ejemplo que carga una página HTML (local) que contiene un "HTML input", y, desde nuestro Delphi, y, con la ayuda de cierto código "Javascript" que insertamos en el documento, podremos obtener el valor que tenga dicho "HTML input" "en tiempo real", es decir, si se cambia el valor de dicho "HTML input", luego de haber cargado la página, siempre podremos obtener el valor "real", o sea, el que tenga en ese momento el "HTML input".

Con el ejemplo que adjunto podrás ver todo esto que digo funcionando, pero, me gustaría explicar un poco en este mismo hilo cómo funciona el ejemplo que adjunto, es decir, cómo lo organizamos.

El ejemplo en cuestión se trata de un programa con un formulario que muestra un componente "TEdgeBrowser" y un par de botones. Pero, también podrá verse en el ejemplo un archivo "sample.html", que, es el que cargamos en el componente "TEdgeBrowser", y, un archivo "sample.js", que, nos servirá para que Javascript realice el trabajo que le solicitemos, y, nos retorne un resultado. Yo espero que después de revisar el siguiente "post" y el ejemplo adjunto se entienda la idea básica, pero, siempre puedes "postear" aquí mismo en este hilo preguntando cualquier cosa sobre la que tengas alguna duda.

No sé muy bien por dónde empezar, puesto que, como digo, todo está "conjugado", por decirlo así, el ejemplo no funcionaría "si alguna de sus partes" no funcionan como se espera. En fin, vamos a empezar por el principio... Lo primero que hacemos en el ejemplo es cargar en el componente "TEdgeBrowser" la página "sample.html": podría ser una URL, sería lo mismo, pero, como verás, "todo cambiaría". No te preocupes, primero que nada, vamos a cargar dicha página "sample.html" utilizando el evento "Create" de nuestro formulario, tal que así:

Código Delphi [-]
procedure TForm1.FormCreate(Sender: TObject);
begin
  EdgeBrowser1.Navigate( ExtractFilePath(ParamStr(0)) + 'sample.html');
end;

Ahora bien, vamos a ver el contenido de la página "sample.html", que, acabamos de cargar en el componente "TEdgeBrowser":

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sample</title>
  </head>
  <body>
    <div id="text-element">Hello world!</div>
    <input id="user-name" value="Sample value" />
  </body>
</html>

Como puede verse, dicha página contiene únicamente un elemento "div" perfectamente identificado con su atributo "id=text-element" y un "HTML input" que también está identificado con su atributo "id=user-name". El objetivo en nuestro caso será obtener el texto que contiene el elemento "text-element", y, es sólo un ejemplo... podría ser cualquier otro elemento, identificado de otra forma, pero, en fin, nos valdrá para nuestro ejemplo. El otro objetivo, por supuesto, será obtener el valor del "HTML input".

Lo segundo que tenemos que hacer es cargar en la página que a su vez hemos cargado en el componente "TEdgeBrowser", el Javascript que usaremos en nuestro ejemplo. Esto lo vamos a conseguir utilizando el evento "CreateWebViewCompleted" del componente "TEdgeBrowser", que, quedaría como sigue a continuación:

Código Delphi [-]
procedure TForm1.EdgeBrowser1CreateWebViewCompleted(Sender: TCustomEdgeBrowser; AResult: HRESULT);
var
  T: TStrings;
begin
  T := TStringList.Create();
  try
    T.LoadFromFile(ExtractFilePath(ParamStr(0)) + 'sample.js');
    EdgeBrowser1.DefaultInterface.AddScriptToExecuteOnDocumentCreated(PWideChar(T.Text), nil);
  finally
    T.Free();
  end;
end;

Es decir, aprovechamos el evento mencionado para añadir el script "sample.js" al documento / página que tenemos cargada en el "TEdgeBrowser". Como puede observarse, lo que el método "AddScriptToExecuteOnDocumentCreated" requiere es una cadena, empero, no sería muy limpio ni muy conveniente usar una cadena que a su vez sería el código Javascript que queremos incluir en la página. Digo que no sería muy limpio ni conveniente ni curioso, porque, a continuación vamos a ver el archivo "sample.js", que, contiene el Javascript que vamos a añadir en la página:

window.addEventListener('message', function (event) {

  switch (event.data.message) {
    case "get-input-value":
      window.chrome.webview.postMessage({
        "message": event.data.message, 
        "result": document.getElementById(event.data.input_id).value
      });
      break;	
    case "get-element-text":
      window.chrome.webview.postMessage({
        "message": event.data.message, 
        "result": document.getElementById(event.data.element_id).innerText
      });
      break;		  
  }  
});

Como vemos, nuestro Javascript sería complicado de resumir en una "cadena", por eso lo leemos desde un archivo, en este caso "sample.js". Además, esto nos permitirá editar dicho Javascript directamente en el archivo, facilitándonos cualquier cambio o añadido que queramos hacer a dicho código Javascript.

Como podemos ver, por otro lado, el Javascript "no es cualquier cosa", es decir, es el Javascript que hemos preparado para nuestro ejemplo, y, tiene una forma de funcionar, por decirlo así. Lo que estamos haciendo es añadir un evento "message" a la página HTML, y, dicho evento, será disparado por nosotros mismos desde Delphi. En particular, el evento "Click" del botón de nuestro ejemplo que contiene el texto "Get input value", puede verse de la siguiente forma:

Código Delphi [-]
procedure TForm1.Button1Click(Sender: TObject);
begin
  EdgeBrowser1.ExecuteScript('window.postMessage({"message": "get-input-value", "input_id": "user-name"});');
end;

Aquí podríamos pararnos a examinar qué es lo que estamos haciendo hasta ahora. Si observamos el evento anterior, estamos usando el método "ExecuteScript" del componente "TEdgeBrowser", y, el Javascript que estamos ejecutando es la cadena que puede verse arriba:

window.postMessage({"message": "get-input-value", "input_id": "user-name"});

Es decir, en pocas palabras, lo que estamos haciendo es enviar un mensaje a nuestra página cargada en el componente "TEdgeBrowser", y, le estamos enviando como "cuerpo del mensaje", un objeto Javascript que contiene las propiedades "message" e "input_id". Cuando ejecutemos dicho código Javascript en la página, el evento "message" que hemos preparado previamente en nuestro "sample.js" será disparado, y, dicho evento recibirá el "cuerpo del mensaje" que hemos dicho.

En palabras "naturales" lo que estamos diciéndole a nuestro Javascript es: "Oyes, te mando el "message" "get-input-value", que, ya sabes que significa que me tienes que responder con el valor del "input_id" "user-name" que te estoy indicando. Aquí tendríamos que volver al código Javascript de nuestro "sample.js", en particular, al siguiente fragmento de código javascript:

case "get-input-value":
  window.chrome.webview.postMessage({
    "message": event.data.message, 
    "result": document.getElementById(event.data.input_id).value
  });
  break;

Es decir, cuando recibamos el "message" "get-input-value", enviaremos un mensaje a nuestro programa Delphi, que, contendrá el valor del "HTML input" cuyo ID se nos ha indicado. Lo que realmente estamos haciendo aquí se puede resumir muchísimo en la siguiente línea de javascript:

document.getElementById(event.data.input_id).value

Es decir... esa es la forma en la que, desde Javascript, podemos obtener el valor de un "HTML input". Vaya, es una de las formas, puesto que podríamos utilizar algún otro "selector" para buscar el "HTML input", pero, la más sencilla sería esta: obtener la referencia al "HTML input" mediante su "ID", y, haciéndolo así, ya podremos acceder a la propiedad "value" que tienen estos elementos "HTML input".

Ahora bien, estamos diciendo que primero hemos enviado un mensaje que recibirá nuestro código Javascript, previamente cargado en la página, y, ahora hemos visto que dicho código Javascript nos enviará de vuelta "lo que le estamos pidiendo", pero, ¿y cómo recibimos en Delphi "lo que nos está enviando Javascript"? Pues utilizando el evento "WebMessageReceived" de nuestro componente "TEdgeBrowser", cuyo código es el siguiente:

Código Delphi [-]
procedure TForm1.EdgeBrowser1WebMessageReceived(Sender: TCustomEdgeBrowser; Args: TWebMessageReceivedEventArgs);
var
  JSONString: PWideChar;
  JSONValue: TJSonValue;
begin

  Args.ArgsInterface.Get_webMessageAsJson(JSONString);

  JSONValue := TJSonObject.ParseJSONValue(JSONString);

  if JsonValue.GetValue<string>('message') = 'get-input-value' then
  begin
    ShowMessage(JsonValue.GetValue<string>('result'));
  end;

  if JsonValue.GetValue<string>('message') = 'get-element-text' then
  begin
    ShowMessage(JsonValue.GetValue<string>('result'));
  end;

end;

Como hemos estado viendo cómo "pedirle a nuestro Javascript" que nos envíe el valor de un determinado "HTML input", el código que nos interesa en particular sería el siguiente:

Código Delphi [-]
  if JsonValue.GetValue<string>('message') = 'get-input-value' then
  begin
    ShowMessage(JsonValue.GetValue<string>('result'));
  end;

En dicho código estamos comprobando si el "message" que nos envía Javascript es "get-input-value". Si este es el caso, ya sabemos que lo que tenemos en "result" es el valor del "HTML input" que le hemos solicitado antes. Y ya podremos mostrar dicho valor o en definitiva hacer con él lo que necesitemos. Por último, tengo que hacer notar que todo esto es un ejemplo y nada más. En un programa real, el asunto debería acaso cambiar un poco. Por ejemplo, deberíamos enviar a nuestro Javascript algún tipo de "identificador de mensaje", que, a su vez obtuviésemos de vuelta cuando Javascript nos mandase un mensaje a nosotros.

¿A santo de qué, esto último? Bueno. Ahora mismo estaríamos identificando el mensaje de vuelta (enviado desde Javascript) mediante la cadena "get-input-value", pero, ¿qué ocurriría si le pedimos a Javascript el valor de dos o más "HTML input" de forma consecutiva, por decirlo así? De alguna manera necesitaremos identificar cada uno de los mensajes, para, poder a su vez identificar cada una de las "respuestas" de nuestro código Javascript. No he querido acaso ir más allá con el ejemplo, porque, seguramente, existen varias formas de hacer esto.

Una posible forma sería que Javascript retornase el ID del "HTML input" cuyo valor hemos solicitado, por ejemplo, modificando el código de nuestro "sample.js" para que quedase así:

window.chrome.webview.postMessage({
  "message": event.data.message, 
  "input_id": event.data.input_id,
  "result": document.getElementById(event.data.input_id).value
});

De este modo, desde el evento "WebMessageReceived" de nuestro "TEdgeBrowser" podríamos también atender a dicho identificador:

Código Delphi [-]
  if JsonValue.GetValue<string>('message') = 'get-input-value' then
  begin
    if JsonValue.GetValue<string>('input_id') = 'user-name' then
    begin
      ShowMessage('Este es el valor del input con ID user-name: " + JsonValue.GetValue('result'));
    end;
  end;

En fin, no quiero enrrollarme mucho más. La idea de todo esto es que en efecto podemos comunicarnos con la página que tenemos cargada en un componente "TEdgeBrowser". Podemos cargar en dicha página el Javascript necesario que nos sirva tanto para obtener la información de la página que necesitemos, así como para retornarnos dicha información cuando se la solicitemos. Podéis echar un vistazo al ejemplo adjunto para que podáis ver todo esto funcionando, así como para realizar vuestras propias modificaciones, es decir, para que podáis jugar un poco con ello.

Si tenéis cualquier pregunta sobre todo esto, podéis también "postearla" aquí y tanto yo como otros compañeros intentaremos ayudaros en la medida de nuestras posibilidades.

[MAXIUM]

WOW DEC, todo un trabajo te has dado. Agradecido.

[dec]

Hola a todos,

Empezado por MAXIUM

WOW DEC, todo un trabajo te has dado. Agradecido.

Nada, hombre. La cosa es que se coja la idea: por eso digo, que, cualquier otra duda sobre esto, "postéala" aquí y tratamos de echar una mano.

[Neftali [Germán.Estévez]]

Fantástica explicación David.

[dec]

Empezado por Neftali [Germán.Estévez]

Fantástica explicación David.

¡Gracias, hombre!