Compartir a través de

Uso de marcos en aplicaciones WebView2

  • Artículo

Los marcos le permiten insertar otras páginas web en su propia página web. Un marco es una subpágina o área dentro de una página web, como una página web dentro de una página web.

Un iframe es un tipo de marco. Otros tipos de marcos son frameset, portal, embed, fencedFramey object. El tipo WebView2 principal para fotogramas es CoreWebView2Frame, que actualmente está habilitado para iframes de nivel superior. Se planea la compatibilidad con otros tipos de marcos.

WebView2 admite api para interactuar con iframes. Puede:

  • Averigüe cuándo se crean los iframes.
  • Averigüe cuándo los iframes van a una dirección URL diferente. Esto funciona igual que los eventos de navegación de máquina de estado para aplicaciones WebView2.
  • Comunicarse entre la aplicación host y los iframes, enviando mensajes en ambas direcciones.
  • Permitir que la aplicación ignore el encabezado de X-Frame-Options respuesta HTTP.

Vea también:

Suscribirse al evento FrameCreated para obtener un marco

Para interactuar con marcos de la aplicación host, el primer paso es suscribirse al evento para que la FrameCreated aplicación host obtenga un objeto frame. El FrameCreated evento se genera cada vez que se crea un marco nuevo. Una vez que la aplicación host haya obtenido un objeto frame, use el objeto frame para supervisar los cambios e interactuar con este marco específico.

La aplicación host debe supervisar la duración de un fotograma mediante la suscripción al CoreWebView2Frame.Destroyed evento, ya que cuando se destruye el marco, la aplicación host ya no puede hacer referencia a ese marco. Los marcos se crean y destruyen durante cada nueva navegación por la página web. Use el CoreWebView2Frame.IsDestroyed método para comprobar si el marco sigue existiendo.

Vea también:

  • iframes en Información general sobre las características y las API de WebView2.

Después de crear un marco, el marco navega a la dirección URL de origen del marco. Los iframes usan eventos de navegación y navegación, como FrameNavigationStarting y NavigationCompleted. Cuando el marco navega a la dirección URL de origen, se generan los siguientes eventos de navegación:

  • NavigationStarting
  • ContentLoading
  • HistoryChanged
  • DOMContentLoaded
  • NavigationCompleted

Frecuencia de navegación dentro de un marco

La navegación puede producirse potencialmente dentro de un marco. Como caso de uso simple, el atributo de source un iframe elemento es una dirección URL, como wikipedia.com, y la dirección URL se carga en un iframe. Normalmente, la navegación se produce inmediatamente después de crear el marco. A ContentLoadingcontinuación, se generan los eventos , DOMContentLoadedy NavigationCompleted .

El marco en sí está navegando. Una página web navega a una dirección URL. De forma similar, un marco puede navegar.

Una vez creado el marco, el marco navega según lo controlado por la aplicación host. Para supervisar lo que sucede en la página principal, eventos como NavigationStarting, NavigationCompletedy HistoryChanged habilitar la aplicación host para navegar de un lado a otro entre marcos o páginas web. Los marcos se navegan a una nueva dirección URL con menos frecuencia que las páginas web, pero se admite el mismo estilo de navegación. El usuario normalmente no puede navegar dentro de un marco, aunque JavaScript lo permite; un marco suele ser estático con respecto a la navegación.

Vea también:

Eventos de navegación:

En lo que respecta a los eventos equivalentes NavigationStarting duplicados y NavigationCompleted , se recomiendan los eventos en CoreWebView2Frame en lugar de los eventos equivalentes y reemplazados en CoreWebView2, porque el CoreWebView2Frame tipo admite más escenarios para permitir interacciones con fotogramas.

Vea también:

Uso de objetos host en un iframe

Para comunicarse entre el lado nativo de la aplicación host y JavaScript que se encuentra en un iframe, use objetos host. Un objeto host es un objeto que se crea en la aplicación host y, a continuación, se usa desde código JavaScript en la página web de la aplicación.

El uso de API de lado nativo desde el script dentro de un marco, a través de un objeto host, es similar a la estructura de página de interoperabilidad web/nativa, como se explica en Llamada a código de lado nativo desde código del lado web:

Para usar objetos host dentro de un iframe:

  1. Defina el objeto host e implemente IDispatch.
  2. Agregue el objeto host en el lado nativo mediante AddHostObjectToScriptWithOrigins (Win32) o AddHostObjectToScript (.NET).
  3. Desde JavaScript en el código del lado web, acceda a este objeto host mediante la chrome.webview.hostObjects.<name> API.

Para acceder y controlar objetos de lado nativo desde JavaScript del lado web en un marco, use AddHostObjectToScriptWithOrigins (Win32) o CoreWebView2Frame.AddHostObjectToScript (.NET), que tiene un origins parámetro . El origins parámetro especifica a qué direcciones URL se permitirá el acceso de iframes, por motivos de seguridad. Este parámetro identifica las direcciones URL para las que los iframes tendrán acceso al objeto host.

Si el marco se desplaza a una dirección URL que no está en la origins lista, el marco no podrá operar el objeto host; el marco no podrá leer ni escribir ninguna propiedad. Consulte la tabla Nombre del método en el método para el AddHostObjectToScript marco. Consulte las dos filas siguientes:

  • applyHostFunction, getHostPropertyy setHostProperty.
  • getLocalProperty y setLocalProperty.

El método anterior funciona como el método siguiente:

  • Método CoreWebView2.AddHostObjectToScript. Consulte la tabla Nombre del método . Lea estos dos temas de referencia de API, aunque en el caso de los marcos, usaría el método que admite un origins parámetro en su lugar.

Código de ejemplo

Vea Paso 6: Llamar a AddHostObjectToScript para pasar el objeto host al código del lado web en Llamada a código de lado nativo desde código del lado web.

Vea también:

Envío y recepción de mensajes

Los mensajes se pueden enviar entre la aplicación nativa y el código JavaScript que se encuentra en un iframe:

  • Puede enviar mensajes desde JavaScript en un iframe en una página HTML a la aplicación host.
  • Puede enviar mensajes desde la aplicación host a JavaScript en un iframe en una página HTML.

Envío de mensajes web desde un iframe a la aplicación host

Para enviar mensajes web desde un iframe a la aplicación host, use el window.chrome.webview.postMessage método :

window.chrome.webview.postMessage(`SetTitleText ${titleText.value}`);

Para recibir estos mensajes en la aplicación host, la aplicación host debe suscribirse a WebMessageReceived event.

Envío de mensajes desde la aplicación host al iframe

La aplicación host envía mensajes al iframe llamando al PostWebMessageAsJson método o PostWebMessageAsString .

El iframe recibe el mensaje mediante la suscripción al window.chrome.webview.addEventListener('message') evento, como se indica a continuación:

window.chrome.webview.addEventListener('message', arg => {
    // implement event listener here
});

Vea también:

Ejecución de código JavaScript en iframes mediante ExecuteScript

Una aplicación WebView2 puede ejecutar cualquier JavaScript en un marco mediante ExecuteScript.

Para que el script se ejecute en un iframe, se debe crear un contexto de ejecución. Después del ContentLoading evento se crea un contexto de ejecución, por lo que si ExecuteScript se llama a antes de que se produzca el ContentLoading evento, no se ejecutará el script y se devolverá la cadena null .

Para obtener información sobre el ContentLoading evento, vea Eventos de navegación para aplicaciones WebView2, que es válido para marcos y páginas web.

Vea también:

Modificación de eventos de red mediante el WebResourceRequested evento en iframes

Esta característica es experimental

En el caso de los iframes, puede escuchar eventos de red y modificarlos mediante el WebResourceRequested evento .

Vea también:

Consulte las API de versión preliminar más recientes. Los vínculos siguientes contienen 1.0.1466-prerelease. En la lista desplegable Versión de la parte superior izquierda de los documentos de referencia de API, seleccione la versión preliminar más reciente.

Omitir X-Frame-Options para representar una página web dentro de un marco

Las X-Frame-Options páginas web usan el encabezado de respuesta HTTP para evitar que una aplicación representara esa página web dentro de un marco. La AdditionalAllowedFrameAncestors propiedad permite que la aplicación omita el X-Frame-Options encabezado para representar la página web dentro de un marco.

Vea también:

Ejemplo de uso de iframes en una aplicación host

En este código de ejemplo se muestra cómo usar las API de marco, entre las que se incluyen:

  • FrameCreated
    • CoreWebView2FrameCreatedEventArgs
  • DOMContentLoaded
    • CoreWebView2DOMContentLoadedEventArgs
  • ExecuteScript

Este código de ejemplo se condensa de MainWindow.xaml.cs en el ejemplo WebView2WpfBrowser .

        void DOMContentLoadedCmdExecuted(object target, ExecutedRoutedEventArgs e)
        {
            // Subscribe to the FrameCreated event to obtain the frame object when 
            // it's created.
            webView.CoreWebView2.FrameCreated += WebView_FrameCreatedDOMContentLoaded;
            webView.NavigateToString(@"<!DOCTYPE html>" +
                                      "<h1>DOMContentLoaded sample page</h1>" +
                                      "<h2>The content to the iframe and below will be added after DOM content is loaded </h2>" +
                                      "<iframe style='height: 200px; width: 100%;'/>");
        }

        void WebView_FrameCreatedDOMContentLoaded(object sender, CoreWebView2FrameCreatedEventArgs args)
        {
            // In order for ExecuteScriptAsync to successfully run inside the iframe, 
            // subscribe to the ContentLoading or DOMContentLoaded event.  Once these 
            // events are raised, you can call ExecuteScriptAsync.
            args.Frame.DOMContentLoaded += (frameSender, DOMContentLoadedArgs) =>
            {
                args.Frame.ExecuteScriptAsync(
                    "let content = document.createElement(\"h2\");" +
                    "content.style.color = 'blue';" +
                    "content.textContent = \"This text was added to the iframe by the host app\";" +
                    "document.body.appendChild(content);");
            };
        }

Introducción a la referencia de API

Las siguientes características, enumeradas en Información general sobre las características y las API de WebView2, incluyen API relacionadas con fotogramas:

Vea también

Páginas externas: