Utilizando JavaScript con el WebBrowser de WPF (1/2)

Con la llegada del FrameWork 3.5 SP1 apareció un nuevo control denominado WebBrowser que al igual que su hermano de WinForms es un ActiveX de IE que nos permite tener un navegador dentro de nuestras aplicaciones WPF. Al igual que su hermano de WinForms este es muy sencillo a la hora de utilizarlo, tiene el método Navigate donde indicamos la URL que queremos mostrar, ningún misterio hasta ahora. Las funciones soportadas por este control son:

  • NavigateToString
  • NavigateToStream
  • Navigate
  • GoBack
  • GoForward

Pero muchas veces o en mi caso me ha ocurrido es necesario interactuar desde la aplicación de WPF con la aplicación Web que alojamos en nuestro WebBrowser y la única manera de hacerlo (o por lo menos la que yo se) es a través de Javascript, invocando métodos de JavaScript desde  WPF o llamando a métodos de clases de WPF desde JavaScript.

Para realizar esto debemos de crear una clase en nuestra aplicación con el atributo [ComVisible(true)] que será el que interactué con la pagina. Como siempre se explica mejor con un ejemplo allá va.

Nuestro XAML va a ser muy sencillo, solo tendrá el objeto WebBrowser

  1. <Grid x:Name=»root»>
  2.         <WebBrowser x:Name=»browser» HorizontalAlignment=»Left»/>
  3.     </Grid>

La clase que tendrá los métodos que serán llamados desde JavaScript

  1. [ComVisible(true)]
  2.     public class ScriptingHelper
  3.     {
  4.         public void ShowMessage(string message)
  5.         {
  6.             MessageBox.Show(message);
  7.         }
  8.     

Como podéis ver solo tiene un método que muestra un mensaje al usuario, aparte de tener el atributo [ComVisible(true)] , los métodos deben de ser públicos.

Lo siguiente es navegar a la pagina que queremos, que en nuestro ejemplo es una página que creamos nosotros con un método JavaScript que será llamado desde un botón y este método JavaScript llamara al método de la clase WPF

  1. <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0 Transitional//EN»>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <script type=»text/javascript»>
  6.         function OnClick() {
  7.             var message = «Hola!»;
  8.             window.external.ShowMessage(message);
  9.         }
  10.     </script>
  11. </head>
  12. <body>
  13.   <a href=»#» onclick=»OnClick()»>Click Hola</a>
  14. </body>
  15. </html>

Si os fijáis la manera de llamarle es a través de window.external.NombreMetodo. Pero para que esto funcione debemos hacer que nuestro navegador navegue hasta esta pagina

  1. string uri = AppDomain.CurrentDomain.BaseDirectory + «TestPage.html»;
  2.             this.browser.Navigate(new Uri(uri, UriKind.Absolute));
  3.             this.browser.ObjectForScripting = new ScriptingHelper();

pero aparte de la pagina a navegar es importante indicarle al WebBrowser cual va a ser la clase que va a ser invocada desde la pagina Web a traves de la propiedad ObjectForScripting.

Para llamar a una función JavaScript desde nuestra aplicación WPF es mucho mas sencillo ya que utilizaremos el método InvokeScript donde el primer parámetro es el nombre del método javascript y el segundo es un array de objetos donde pasaremos los parámetros del método javascript

  1. this.webBrowser.InvokeScript(«JavaScriptFunctionWithParameters», this.messageTextBox.Text);

Un comentario sobre “Utilizando JavaScript con el WebBrowser de WPF (1/2)”

Responder a anonymous Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *