Cómo: Implementar la comunicación bidireccional entre código DHTML y código de la aplicación cliente

Actualización: noviembre 2007

Se puede utilizar el control WebBrowser para agregar código existente de aplicaciones Web DHTML a las aplicaciones cliente de formularios Windows Forms. Esto es útil cuando se ha invertido un tiempo de desarrollo significativo para crear controles basados en DHTML y se desea aprovechar las numerosas funciones de la interfaz de usuario de formularios Windows Forms sin tener que volver a escribir el código existente.

El control WebBrowser permite implementar la comunicación bidireccional entre el código de la aplicación cliente y el código de secuencia de comandos de la página Web por medio de las propiedades ObjectForScripting y Document. Además, se puede configurar el control WebBrowser para que los controles Web se combinen sin problemas con otros controles del formulario de la aplicación, ocultando la implementación de DHTML. Para combinar bien los controles, se ha de dar formato a la página mostrada para que el color de fondo y el estilo visual coincidan con el resto del formulario, y utilizar las propiedades AllowWebBrowserDrop, IsWebBrowserContextMenuEnabled y WebBrowserShortcutsEnabled para deshabilitar la funcionalidad de explorador estándar.

Para incrustar DHTML en la aplicación de Windows Forms

1. Establezca la propiedad AllowWebBrowserDrop del control WebBrowser en false para evitar que el control WebBrowser abra los archivos colocados en él.

   webBrowser1.AllowWebBrowserDrop = False
   

   webBrowser1.AllowWebBrowserDrop = false;
   

2. Establezca la propiedad IsWebBrowserContextMenuEnabled del control en false para impedir que el control WebBrowser muestre su menú contextual cuando el usuario haga clic en él con el botón secundario.

   webBrowser1.IsWebBrowserContextMenuEnabled = False
   

   webBrowser1.IsWebBrowserContextMenuEnabled = false;
   

3. Establezca la propiedad WebBrowserShortcutsEnabled del control en false para impedir que el control WebBrowser responda a las teclas de método abreviado.

   webBrowser1.WebBrowserShortcutsEnabled = False
   

   webBrowser1.WebBrowserShortcutsEnabled = false;
   

4. Establezca la propiedad ObjectForScripting en el constructor del formulario o un controlador de eventos Load.

   En el código siguiente se utiliza la propia clase de formulario para el objeto de secuencia de comandos.

   Nota:
   El Modelo de objetos componentes (COM) debe poder tener acceso al objeto de secuencia de comandos. Para dejar su formulario visible a COM, agregue el atributo ComVisibleAttribute a su clase de formulario.

   webBrowser1.ObjectForScripting = Me
   

   webBrowser1.ObjectForScripting = this;
   

5. Implemente las propiedades o métodos públicos en el código de la aplicación que utilizará el código de secuencia de comandos.

   Por ejemplo, si utiliza la clase de formulario para el objeto de secuencia de comandos, agregue el código siguiente a la clase de formulario.

   Public Sub Test(ByVal message As String)
       MessageBox.Show(message, "client code")
   End Sub
   

   public void Test(String message)
   {
       MessageBox.Show(message, "client code");
   }
   

6. Utilice el objeto window.external en el código de secuencia de comandos para tener acceso a las propiedades y métodos públicos del objeto especificado.

   En el código HTML siguiente se muestra la forma de llamar a un método en el objeto de secuencia de comandos mediante un clic de botón. Copie este código en el elemento BODY de un documento HTML que se cargue utilizando el método Navigate del control o que se asigne a la propiedad DocumentText del control.

   <button onclick="window.external.Test('called from script code')">
       call client code from script code
   </button>
   

7. Implemente funciones en el código de secuencia de comandos que utilizará el código de la aplicación.

   El elemento SCRIPT HTML siguiente proporciona una función de ejemplo. Copie este código en el elemento HEAD de un documento HTML que se cargue utilizando el método Navigate del control o que se asigne a la propiedad DocumentText del control.

   <script>
   function test(message) { 
       alert(message); 
   }
   </script>
   

8. Utilice la propiedad Document para tener acceso al código de secuencia de comandos desde el código de la aplicación cliente.

   Por ejemplo, agregue el código siguiente al controlador de eventos Click de un botón.

   webBrowser1.Document.InvokeScript("test", _
       New String() {"called from client code"})
   

   webBrowser1.Document.InvokeScript("test",
       new String[] { "called from client code" });
   

9. Cuando haya terminado la depuración del DHTML, establezca la propiedad ScriptErrorsSuppressed del control en true para evitar que el control WebBrowser muestre mensajes de error sobre problemas del código de secuencia de comandos.

   ' Uncomment the following line when you are finished debugging.
   'webBrowser1.ScriptErrorsSuppressed = True
   

   // Uncomment the following line when you are finished debugging.
   //webBrowser1.ScriptErrorsSuppressed = true;
   

Ejemplo

El siguiente ejemplo de código completo proporciona una demostración de la aplicación que puede utilizar para entender esta característica. El código HTML se carga en el control WebBrowser a través de la propiedad DocumentText en lugar de cargarse desde un archivo HTML independiente.

Imports System
Imports System.Windows.Forms
Imports System.Security.Permissions

<PermissionSet(SecurityAction.Demand, Name:="FullTrust")> _
<System.Runtime.InteropServices.ComVisibleAttribute(True)> _
Public Class Form1
    Inherits Form

    Private webBrowser1 As New WebBrowser()
    Private WithEvents button1 As New Button()

    <STAThread()> _
    Public Shared Sub Main()
        Application.EnableVisualStyles()
        Application.Run(New Form1())
    End Sub

    Public Sub New()
        button1.Text = "call script code from client code"
        button1.Dock = DockStyle.Top
        webBrowser1.Dock = DockStyle.Fill
        Controls.Add(webBrowser1)
        Controls.Add(button1)
    End Sub

    Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) _
        Handles Me.Load

        webBrowser1.AllowWebBrowserDrop = False
        webBrowser1.IsWebBrowserContextMenuEnabled = False
        webBrowser1.WebBrowserShortcutsEnabled = False
        webBrowser1.ObjectForScripting = Me
        ' Uncomment the following line when you are finished debugging.
        'webBrowser1.ScriptErrorsSuppressed = True

        webBrowser1.DocumentText = _
            "<html><head><script>" & _
            "function test(message) { alert(message); }" & _
            "</script></head><body><button " & _
            "onclick=""window.external.Test('called from script code')"" > " & _
            "call client code from script code</button>" & _
            "</body></html>"
    End Sub

    Public Sub Test(ByVal message As String)
        MessageBox.Show(message, "client code")
    End Sub

    Private Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs) _
        Handles button1.Click

        webBrowser1.Document.InvokeScript("test", _
            New String() {"called from client code"})

    End Sub

End Class

using System;
using System.Windows.Forms;
using System.Security.Permissions;

[PermissionSet(SecurityAction.Demand, Name="FullTrust")]
[System.Runtime.InteropServices.ComVisibleAttribute(true)]
public class Form1 : Form
{
    private WebBrowser webBrowser1 = new WebBrowser();
    private Button button1 = new Button();

    [STAThread]
    public static void Main()
    {
        Application.EnableVisualStyles();
        Application.Run(new Form1());
    }

    public Form1()
    {
        button1.Text = "call script code from client code";
        button1.Dock = DockStyle.Top;
        button1.Click += new EventHandler(button1_Click);
        webBrowser1.Dock = DockStyle.Fill;
        Controls.Add(webBrowser1);
        Controls.Add(button1);
        Load += new EventHandler(Form1_Load);
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        webBrowser1.AllowWebBrowserDrop = false;
        webBrowser1.IsWebBrowserContextMenuEnabled = false;
        webBrowser1.WebBrowserShortcutsEnabled = false;
        webBrowser1.ObjectForScripting = this;
        // Uncomment the following line when you are finished debugging.
        //webBrowser1.ScriptErrorsSuppressed = true;

        webBrowser1.DocumentText =
            "<html><head><script>" +
            "function test(message) { alert(message); }" +
            "</script></head><body><button " +
            "onclick=\"window.external.Test('called from script code')\">" +
            "call client code from script code</button>" +
            "</body></html>";
    }

    public void Test(String message)
    {
        MessageBox.Show(message, "client code");
    }

    private void button1_Click(object sender, EventArgs e)
    {
        webBrowser1.Document.InvokeScript("test",
            new String[] { "called from client code" });
    }

}

Compilar el código

Este código requiere:

• Referencias a los ensamblados System y System.Windows.Forms.

Para obtener información acerca de la generación de este ejemplo desde la línea de comandos de Visual Basic o Visual C#, vea Generar desde la línea de comandos (Visual Basic) o Generar la línea de comandos con csc.exe. También puede generar este ejemplo en Visual Studio pegando el código en un proyecto nuevo.

Vea también

Referencia

WebBrowser

WebBrowser.Document

WebBrowser.ObjectForScripting

Otros recursos

WebBrowser (Control, Windows Forms)