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

O uso de JavaScript em controles WebView2 permite que você personalize aplicativos nativos para atender às suas necessidades. Este artigo explora como usar JavaScript no WebView2 e analisa como desenvolver usando recursos e funções avançados do WebView2.

Antes de começar

Este artigo presume que você já tenha um projeto de trabalho. Se você não tem um projeto e deseja acompanhar, consulte Introdução ao WebView2.

Funções básicas do WebView2

Use as seguintes funções para incorporar JavaScript no código do lado nativo do seu aplicativo WebView2:

Cenário: resultados codificados em JSON do ExecuteScript

Como o resultado é codificado em ExecuteScriptAsync JSON, se o resultado da avaliação do JavaScript for uma cadeia de caracteres, o código do lado nativo receberá uma cadeia de caracteres codificada em JSON, não o valor da cadeia de caracteres.

Por exemplo, o código do lado nativo a seguir executa o script que resulta em uma cadeia de caracteres. A cadeia de caracteres resultante inclui uma aspa no início, uma aspa no final e barras de escape:

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

O script retorna uma cadeia de caracteres que ExecuteScript codifica em JSON para você. Se o código do lado da Web já chamar JSON.stringify , o resultado será duplamente codificado 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 em JSON; as propriedades herdadas não estão incluídas no objeto codificado em JSON. A maioria dos objetos DOM herda todas as propriedades, portanto, seu código do lado da Web deve copiar explicitamente os valores das propriedades em outro objeto e retornar esse objeto para seu código do lado nativo. Por exemplo:

Quando retornamos apenas performance.memory, não vemos nenhuma de suas propriedades no resultado, pois todas as propriedades são herdadas. Se, em vez disso, o código do lado da Web copiar valores de propriedade específicos de performance.memory um novo objeto e retornar esse objeto, o código do lado nativo verá essas propriedades no resultado.

Ao executar o script via ExecuteScriptAsync, esse script é executado no contexto global. Ajuda ter seu script em uma função anônima, para que as variáveis definidas não poluam o contexto global.

Por exemplo:

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

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

Cenário: executando um arquivo JavaScript dedicado

Você pode acessar um arquivo JavaScript dedicado do seu controle WebView2.

O código JavaScript embutido funciona bem para comandos rápidos de JavaScript. No entanto, o código JavaScript embutido não dá suporte a temas de cores e formatação de linha no editor de códigos. Isso dificulta a escrita de grandes seções de código, como no Visual Studio.

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

Para criar e usar um arquivo JS separado e dedicado:

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

2. Converta o arquivo JavaScript em uma cadeia de caracteres passada para ExecuteScriptAsync, colando o seguinte código após a conclusão da navegação na página:

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

3. Passe a text variável para ExecuteScriptAsync:

   await webView.CoreWebView2.ExecuteScriptAsync(text);
   

Cenário: Remoção da funcionalidade arrastar e soltar

Nesta seção, você usa JavaScript para remover a funcionalidade 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 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 não é possível arrastar e soltar.

Cenário: removendo o menu de contexto

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

Para começar, explore a funcionalidade atual do menu de clique 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 padrão de menu de clique com o botão direito do mouse:

   

   Em seguida, adicione código para remover a funcionalidade de menu de clique 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. Verifique se você não consegue abrir um menu de clique com o botão direito.

Confira também

• Introdução ao WebView2
• Repositório WebView2Samples - um exemplo abrangente dos recursos do WebView2.
• Referência da API WebView2
• Interoperabilidade web/nativa na Visão geral das APIs WebView2.