Compartir a través de

Cómo: Implementar Two-Way comunicación entre código DHTML y código de aplicación cliente

Puede usar el WebBrowser control para agregar código de aplicación web HTML dinámico (DHTML) existente a las aplicaciones cliente de Windows Forms. Esto resulta útil cuando ha invertido un tiempo de desarrollo significativo en la creación de controles basados en DHTML y quiere aprovechar las completas funcionalidades de la interfaz de usuario de Windows Forms sin tener que volver a escribir código existente.

El WebBrowser control 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 a través de las propiedades ObjectForScripting y Document. Además, puede configurar el WebBrowser control para que los controles web se combinen sin problemas con otros controles del formulario de aplicación, ocultando su implementación DHTML. Para combinar sin problemas los controles, dé formato a la página para que su color de fondo y estilo visual coincidan con el resto del formulario y use las AllowWebBrowserDroppropiedades , IsWebBrowserContextMenuEnabledy WebBrowserShortcutsEnabled para deshabilitar las características estándar del explorador.

Para insertar DHTML en la aplicación de Windows Forms

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

    webBrowser1.AllowWebBrowserDrop = false;

    webBrowser1.AllowWebBrowserDrop = False

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

    webBrowser1.IsWebBrowserContextMenuEnabled = false;

    webBrowser1.IsWebBrowserContextMenuEnabled = False

  3. Establezca la propiedad del control WebBrowserShortcutsEnabled a false para evitar que el control WebBrowser responda a las teclas de acceso rápido.

    webBrowser1.WebBrowserShortcutsEnabled = false;

    webBrowser1.WebBrowserShortcutsEnabled = False

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

    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 tener acceso a las propiedades y 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 un clic de botón. Copie este código en el elemento BODY de un documento HTML que cargue mediante 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 usará el código de la aplicación.

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

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

  8. Usa la propiedad Document para acceder al código de script desde tu aplicación cliente.

    Por ejemplo, agregue el código siguiente a un controlador de eventos de 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 de depurar el DHTML, establezca la propiedad del ScriptErrorsSuppressed control en true para evitar que el WebBrowser control muestre mensajes de error relacionados con problemas de 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

En el siguiente ejemplo de código completo se proporciona una aplicación de demostración que puede usar para comprender esta característica. El código HTML se carga en el WebBrowser control a través de la DocumentText propiedad 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