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

Artículo
08/10/2011

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 scripting 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 las características de explorador estándar.

Para incrustar DHTML en la aplicación de Windows Forms

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;
```
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;
```
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;
```
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 scripting.

Nota

El Modelo de objetos componentes (COM) debe poder tener acceso al objeto de scripting. Para dejar su formulario visible a COM, agregue el atributo ComVisibleAttribute a su clase de formulario.
```
webBrowser1.ObjectForScripting = Me
```
```
webBrowser1.ObjectForScripting = this;
```
Implemente las propiedades o métodos públicos en el código de la aplicación que utilizará el código de script.

Por ejemplo, si utiliza la clase de formulario para el objeto de scripting, 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");
}
```
Utilice el objeto window.external en el código de scripting 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 scripting 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>
```
Implemente funciones en el código de script 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>
```
Utilice la propiedad Document para tener acceso al código de script 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" });
```

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 script.

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

}