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 funções a seguir para começar a incorporar JavaScript em 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, você receberá uma cadeia de caracteres codificada em 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 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 você chamar JSON.stringify do seu script, 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, você precisará copiar explicitamente seus valores em outro objeto para retornar. Por exemplo:

Quando retornamos apenas performance.memory , não 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 nosso próprio novo objeto para retornar, veremos essas propriedades no resultado.

Ao executar o script por meio ExecuteScriptAsync desse 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 de script dedicado

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

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

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 sua variável de texto usando 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.