Chamar código do lado da Web do código nativo

O uso do JavaScript nos controles WebView2 permite personalizar aplicativos nativos para atender aos seus requisitos. Este artigo explora como usar o JavaScript no WebView2 e analisa como desenvolver usando recursos e funções avançadas do WebView2.

Antes de começar

Este artigo pressupõe que você já tenha um projeto de trabalho. Se você não tiver um projeto e quiser acompanhar, consulte Introdução ao WebView2.

Funções básicas do WebView2

Use as funções a seguir para começar a inserir o JavaScript em seu aplicativo WebView2.

API	Descrição
ExecuteScriptAsync	Execute JavaScript em um controle WebView2. Chame esse método depois que o conteúdo do DOM (Modelo de Objeto de Documento) da página for carregado ou a navegação for concluída. Consulte Introdução ao WebView2.
AddScriptToExecuteOnDocumentCreatedAsync	É executado em cada página quando o DOM é criado. Chame esse método depois que o CoreWebView2 for inicializado.

Cenário: resultados codificados por JSON do ExecuteScript

Como o resultado de ExecuteScriptAsync é codificado por JSON, se o resultado da avaliação do JavaScript for uma cadeia de caracteres, você receberá uma cadeia de caracteres codificada por JSON e não o valor da cadeia de caracteres.

Por exemplo, o código a seguir executa um script que resulta em uma cadeia de caracteres. A cadeia de caracteres resultante inclui uma cotação no início, uma citação no final e barramentos de escape:

string result = await coreWebView2.ExecuteScriptAsync(@"'example'");
Debug.Assert(result == "\"example\"");

O script retorna uma cadeia de caracteres que ExecuteScript JSON codifica para você. Se você chamar JSON.stringify do script, o resultado será codificado duplamente como uma cadeia de caracteres JSON, cujo valor é uma cadeia de caracteres JSON.

Somente as propriedades que estão diretamente no resultado são incluídas no objeto codificado por JSON; as propriedades herdadas não estão incluídas no objeto codificado por JSON. A maioria dos objetos DOM herda todas as propriedades, portanto, você precisará copiar explicitamente seus valores em outro objeto para retornar. Por exemplo:

Script	Resultado
performance.memory	{}
(() => { const {totalJSHeapSize, usedJSHeapSize} = performance.memory; return {totalJSHeapSize, usedJSHeapSize}; })();	{"totalJSHeapSize":4434368,"usedJSHeapSize":2832912}

Quando retornamos, não performance.memory vemos nenhuma de suas propriedades no resultado porque todas as propriedades são herdadas. Se, em vez disso, copiarmos valores de propriedade específicos de performance.memory em nosso próprio novo objeto para retornar, então vemos essas propriedades no resultado.

Ao executar o script por meio ExecuteScriptAsync desse script é executado no contexto global. Ele ajuda a ter seu script em uma função anônima para que todas as variáveis definidas não estejam poluindo o contexto global.

Por exemplo:

• Se você executar o script const example = 10; mais de uma vez, as horas subsequentes em que você executar o script gerarão uma exceção, porque example foi definido na primeira vez que você o executou.

• Se você, em vez disso, executar o script (() => { const example = 10; })(); , a example variável será definida no contexto dessa função anônima. Dessa forma, não está poluindo o contexto global e pode ser executado mais de uma vez.

Cenário: executar um arquivo de script dedicado

Nesta seção, você acessa um arquivo JavaScript dedicado do controle WebView2.

Observação

Embora escrever JavaScript em linha possa ser eficiente para comandos JavaScript rápidos, você perde temas de cor JavaScript e formatação de linha que dificultam a gravação de grandes seções de código no Visual Studio.

Para resolver o problema, crie um arquivo JavaScript separado com seu código e passe uma referência para esse arquivo usando os ExecuteScriptAsync parâmetros.

1. Crie um .js arquivo em seu projeto e adicione o código JavaScript que você deseja executar. Por exemplo, crie um arquivo chamado script.js.

2. Converta o arquivo JavaScript em uma cadeia de caracteres que é passada para ExecuteScriptAsync, colando o seguinte código depois que a página terminar de navegar:

   string text = System.IO.File.ReadAllText(@"C:\PATH_TO_YOUR_FILE\script.js");
   

3. Passe sua variável de texto usando ExecuteScriptAsync:

   await webView.CoreWebView2.ExecuteScriptAsync(text);
   

Cenário: Removendo a funcionalidade de arrastar e soltar

Nesta seção, você usa JavaScript para remover a funcionalidade de arrastar e soltar do controle WebView2.

Para começar, explore a funcionalidade atual de arrastar e soltar:

1. Crie um .txt arquivo para arrastar e soltar. Por exemplo, crie um arquivo chamado contoso.txt e adicione texto a ele.

2. Clique em F5 para compilar e executar o projeto.

3. Arraste e solte o contoso.txt arquivo no controle WebView2. Uma nova janela é aberta, que é o resultado do código em seu projeto de exemplo:

   

4. Em seguida, adicione código para remover a funcionalidade de arrastar e soltar do controle WebView2. Cole o seguinte código depois que o objeto CoreWebView2 for inicializado em seu código:

   await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(
      "window.addEventListener('dragover',function(e){e.preventDefault();},false);" +
      "window.addEventListener('drop',function(e){" +
         "e.preventDefault();" +
         "console.log(e.dataTransfer);" +
         "console.log(e.dataTransfer.files[0])" +
      "}, false);");
   

5. Clique em F5 para compilar e executar o projeto.

6. Tente arrastar e soltar contoso.txt no controle WebView2. Confirme se você não pode arrastar e soltar.

Cenário: Removendo o menu de contexto

Nesta seção, você remove o menu com o botão direito do mouse do controle WebView2.

Para começar, explore a funcionalidade atual do menu com o botão direito do mouse:

1. Clique em F5 para compilar e executar o projeto.

2. Clique com o botão direito do mouse em qualquer lugar no controle WebView2. O menu de contexto exibe os comandos de menu padrão com o botão direito do mouse:

   

   Em seguida, adicione código para remover a funcionalidade do menu com o botão direito do mouse do controle WebView2.

3. Cole o seguinte código depois que o objeto CoreWebView2 for inicializado em seu código:

   await webView.CoreWebView2.ExecuteScriptAsync("window.addEventListener('contextmenu', window => {window.preventDefault();});");
   

4. Clique em F5 para compilar e executar o projeto. Confirme se você não pode abrir um menu com o botão direito do mouse.

Confira também

• Introdução ao WebView2
• Repositório WebView2Samples – um exemplo abrangente de recursos do WebView2.
• Referência de API do WebView2
• Interoperabilidade web/nativo em Visão geral de recursos e APIs do WebView2.