Procedimiento para implementar la comunicación bidireccional entre código DHTML y código de la aplicación cliente

  • Artículo

Puede usar el control WebBrowser para agregar código de aplicación web de HTML dinámico (DHTML) existente a sus aplicaciones de cliente de Windows Forms. Esto es útil cuando se ha invertido un tiempo de desarrollo importante para crear controles basados en DHTML y quiere aprovechar las funciones de la interfaz de usuario enriquecida de 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 de cliente y el código de scripting de su página web mediante las propiedades ObjectForScripting y Document. Además, puede configurar el control WebBrowser para que los controles web se combinen fácilmente con otros controles del formulario de la aplicación, ocultando su implementación DHTML. Para combinar los controles sin problemas, dé formato a la página mostrada para que el color de fondo y el estilo visual coincidan con el resto del formulario, y use 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

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

    webBrowser1.AllowWebBrowserDrop = false;

    webBrowser1.AllowWebBrowserDrop = False

  2. Establezca la propiedad IsWebBrowserContextMenuEnabled del control en false para evitar 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 evitar que el control WebBrowser responda a teclas de método abreviado.

    webBrowser1.WebBrowserShortcutsEnabled = false;

    webBrowser1.WebBrowserShortcutsEnabled = False

  4. Establezca la propiedad ObjectForScripting en el constructor del formulario o invalide el método OnLoad.

    El código siguiente usa la propia clase de formulario para el objeto de scripting.

    webBrowser1.ObjectForScripting = new MyScriptObject(this);

    webBrowser1.ObjectForScripting = New MyScriptObject(Me)

  5. Implemente el objeto de scripting.

    public class MyScriptObject
{
    private Form1 _form;

    public MyScriptObject(Form1 form)
    {
        _form = form;
    }

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

    Public Class MyScriptObject
    Private _form As Form1

    Public Sub New(ByVal form As Form1)
        _form = form
    End Sub

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

End Class

  6. Use el objeto window.external en el código de scripting para acceder a las propiedades y los métodos públicos del objeto especificado.

    El código HTML siguiente muestra cómo llamar a un método en el objeto de scripting desde el evento de clic de un botón. Copie este código en el elemento BODY de un documento HTML que cargue con el método Navigate del control o que 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 script que el código de la aplicación usará.

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

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

  8. Use la propiedad Document para acceder al código de scripting desde el código de la aplicación cliente.

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

    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 código DHTML, establezca la propiedad ScriptErrorsSuppressed del control en true para evitar que el control WebBrowser muestre mensajes de error para los 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 aplicación de demostración que puede usar para comprender esta característica. El código HTML se carga en el control WebBrowser mediante la propiedad DocumentText en lugar de cargarse desde un archivo HTML independiente.

using System;
using System.Windows.Forms;

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

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        webBrowser1.AllowWebBrowserDrop = false;
        webBrowser1.IsWebBrowserContextMenuEnabled = false;
        webBrowser1.WebBrowserShortcutsEnabled = false;
        webBrowser1.ObjectForScripting = new MyScriptObject(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>";
    }

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

public class MyScriptObject
{
    private Form1 _form;

    public MyScriptObject(Form1 form)
    {
        _form = form;
    }

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

Imports System.Windows.Forms

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

    Protected Overrides Sub OnLoad(e As EventArgs)
        MyBase.OnLoad(e)

        webBrowser1.AllowWebBrowserDrop = False
        webBrowser1.IsWebBrowserContextMenuEnabled = False
        webBrowser1.WebBrowserShortcutsEnabled = False
        webBrowser1.ObjectForScripting = New MyScriptObject(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

    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

Public Class MyScriptObject
    Private _form As Form1

    Public Sub New(ByVal form As Form1)
        _form = form
    End Sub

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

End Class

Compilar el código

Este código requiere:

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

Consulte también