Compartilhar via

Utilizar frames em aplicações WebView2

  • Artigo

Os frames permitem-lhe incorporar outras páginas Web na sua própria página Web. Uma moldura é uma subpágina ou área numa página Web, como uma página Web numa página Web.

Um iframe é um tipo de moldura. Outros tipos de frames são frameset, portal, embed, , fencedFramee object. O tipo main WebView2 para frames é CoreWebView2Frame, que está atualmente ativado para iframes de nível superior. O suporte para outros tipos de frames está planeado.

O WebView2 suporta APIs para interagir com iframes. Você pode:

  • Saiba quando são criados iframes.
  • Saiba quando os iframes estão a navegar para um URL diferente. Isto funciona da mesma forma que os eventos de Navegação da máquina de estado para aplicações WebView2.
  • Comunique entre a aplicação anfitriã e os iframes, enviando mensagens em ambas as direções.
  • Permitir que a aplicação ignore o cabeçalho de X-Frame-Options resposta HTTP.

Veja também:

Subscrever o evento FrameCreated para obter uma moldura

Para interagir com frames na sua aplicação anfitriã, o primeiro passo é subscrever o FrameCreated evento para que a aplicação anfitriã obtenha um objeto de moldura. O FrameCreated evento é gerado sempre que é criado um novo frame. Depois de a aplicação anfitriã ter obtido um objeto de moldura, utilize o objeto de moldura para monitorizar as alterações e interagir com esta moldura específica.

A aplicação anfitriã tem de monitorizar a duração de uma moldura ao subscrever o CoreWebView2Frame.Destroyed evento, uma vez que, quando a moldura é destruída, a aplicação anfitriã já não pode referenciar essa moldura. Os fotogramas são criados e destruídos durante cada nova navegação de página Web. Utilize o CoreWebView2Frame.IsDestroyed método para marcar se a moldura ainda existe.

Veja também:

  • iframes em Descrição Geral das APIs webView2.

Depois de criar uma moldura, a moldura navega para o URL de origem da moldura. Os iframes utilizam eventos de navegação e navegação, tais como FrameNavigationStarting e NavigationCompleted. Quando a moldura navega para o URL de origem, são gerados os seguintes eventos de navegação:

  • NavigationStarting
  • ContentLoading
  • HistoryChanged
  • DOMContentLoaded
  • NavigationCompleted

Frequência de navegação dentro de uma moldura

A navegação pode potencialmente ocorrer dentro de uma moldura. Como um caso de utilização simples, o atributo de source um iframe elemento é um URL, como wikipedia.com, e o URL é carregado num iframe. Normalmente, a navegação ocorre imediatamente após a criação da moldura. Os ContentLoadingeventos , DOMContentLoadede NavigationCompleted são então gerados.

A própria moldura está a navegar. Uma página Web navega para um URL. Da mesma forma, uma moldura navega potencialmente.

Após a criação da moldura, a moldura navega como orientada pela sua aplicação anfitriã. Para monitorizar o que se passa na página main, eventos como NavigationStarting, NavigationCompletede HistoryChanged permitir que a aplicação anfitriã navegue para trás e para a frente entre frames ou páginas Web. Os frames são navegados para um novo URL com menos frequência do que as páginas Web, mas o mesmo estilo de navegação é suportado. Normalmente, o utilizador não consegue navegar dentro de uma moldura, embora o JavaScript o permita; Normalmente, uma moldura é estática em relação à navegação.

Veja também:

Eventos de navegação:

Relativamente ao equivalente NavigationStarting duplicado e NavigationCompleted aos eventos, os eventos em CoreWebView2Frame são recomendados em vez dos eventos equivalentes substituídos em CoreWebView2, porque o CoreWebView2Frame tipo suporta mais cenários para permitir interações com frames.

Veja também:

Utilizar objetos de anfitrião num iframe

Para comunicar entre o lado nativo da aplicação anfitriã e o JavaScript que está num iframe, utilize objetos anfitriões. Um objeto anfitrião é um objeto que cria na aplicação anfitriã e, em seguida, utiliza a partir do código JavaScript no lado da página Web da aplicação.

A utilização de APIs nativas do script dentro de uma moldura, através de um objeto anfitrião, é semelhante à estrutura de páginas interop web/nativa, conforme explicado em Chamar código do lado nativo do código do lado da Web:

Para utilizar objetos de anfitrião num iframe:

  1. Defina o objeto anfitrião e implemente IDispatch.
  2. Adicione o objeto anfitrião no lado nativo com AddHostObjectToScriptWithOrigins (Win32) ou AddHostObjectToScript (.NET).
  3. A partir de JavaScript no código do lado da Web, aceda a este objeto anfitrião com a chrome.webview.hostObjects.<name> API.

Para aceder e controlar objetos nativos de JavaScript do lado da Web numa moldura, utilize AddHostObjectToScriptWithOrigins (Win32) ou CoreWebView2Frame.AddHostObjectToScript (.NET), que tem um origins parâmetro. O origins parâmetro especifica os URLs aos quais os iframes terão permissão para aceder, por motivos de segurança. Este parâmetro identifica os URLs para os quais os iframes terão acesso ao objeto anfitrião.

Se a moldura for navegada para um URL que não esteja na origins lista, a moldura não conseguirá operar o objeto anfitrião; a moldura não poderá ler ou escrever quaisquer propriedades. Veja a tabela Nome do método no método da AddHostObjectToScript sua arquitetura. Veja as duas linhas seguintes:

  • applyHostFunction, getHostPropertye setHostProperty.
  • getLocalProperty e setLocalProperty.

O método acima funciona como o seguinte método:

Código de exemplo

Consulte o Passo 6: Chamar AddHostObjectToScript para transmitir o objeto anfitrião ao código do lado da Web em Chamar código nativo do código do lado da Web.

Veja também:

Enviar e receber mensagens

As mensagens podem ser enviadas entre a aplicação nativa e o código JavaScript que está num iframe:

  • Pode enviar mensagens de JavaScript num iframe numa página HTML para a aplicação anfitriã.
  • Pode enviar mensagens da aplicação anfitriã para JavaScript num iframe numa página HTML.

Enviar mensagens Web de um iframe para a aplicação anfitriã

Para enviar mensagens Web de um iframe para a aplicação anfitriã, utilize o window.chrome.webview.postMessage método :

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

Para receber estas mensagens na aplicação anfitriã, a aplicação anfitriã tem de subscrever o WebMessageReceived event.

Enviar mensagens da aplicação anfitriã para o iframe

A aplicação anfitriã envia mensagens para o iframe ao chamar o PostWebMessageAsJson método ou PostWebMessageAsString .

O iframe recebe a mensagem ao subscrever o window.chrome.webview.addEventListener('message') evento, da seguinte forma:

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

Veja também:

Executar código JavaScript em iframes com ExecuteScript

Uma aplicação WebView2 pode executar qualquer JavaScript numa moldura com ExecuteScript.

Para que o script seja executado num iframe, tem de ser criado um contexto de execução. É criado um contexto de execução após o ContentLoading evento, por isso, se ExecuteScript for chamado antes de o ContentLoading evento ser gerado, o script não será executado e a cadeia null será devolvida.

Para obter informações sobre o ContentLoading evento, veja Eventos de navegação para aplicações WebView2, que são válidos para frames e páginas Web.

Veja também:

Modificar eventos de rede com o WebResourceRequested evento em iframes

Esta funcionalidade é experimental

Para iframes, pode ouvir eventos de rede e modificá-los através do WebResourceRequested evento.

Veja também:

Veja as APIs de pré-lançamento mais recentes. As seguintes ligações contêm 1.0.1466-prerelease. Na lista pendente Versão , no canto superior esquerdo dos documentos de Referência da API, selecione a pré-lançamento mais recente.

Ignorar X-Frame-Options para compor uma página Web dentro de uma moldura

O X-Frame-Options cabeçalho de resposta HTTP é utilizado por páginas Web para impedir uma aplicação de compor essa página Web dentro de uma moldura. A AdditionalAllowedFrameAncestors propriedade permite que a aplicação ignore o X-Frame-Options cabeçalho, para compor a página Web dentro de uma moldura.

Veja também:

Exemplo de utilização de iframes numa aplicação anfitriã

Este código de exemplo mostra como utilizar APIs de moldura, incluindo:

  • FrameCreated
    • CoreWebView2FrameCreatedEventArgs
  • DOMContentLoaded
    • CoreWebView2DOMContentLoadedEventArgs
  • ExecuteScript

Este código de exemplo é condensado a partir de MainWindow.xaml.cs no exemplo 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);");
            };
        }

Descrição geral da Referência da API

As seguintes funcionalidades, listadas em Descrição geral das APIs webView2, incluem APIs relacionadas com frames:

Confira também

Páginas externas: