Chamar código do lado da Web a partir de código do lado nativo

A utilização de JavaScript em controlos WebView2 permite-lhe personalizar aplicações nativas para satisfazer os seus requisitos. Este artigo explora como utilizar JavaScript no WebView2 e analisa como programar com funcionalidades e funções avançadas do WebView2.

Antes de começar

Este artigo pressupõe que já tem um projeto a funcionar. Se não tiver um projeto e quiser acompanhar, consulte Introdução ao WebView2.

Funções WebView2 básicas

Utilize as seguintes funções para começar a incorporar JavaScript na sua aplicação WebView2.

Cenário: ExecuteScript JSON-encoded results (Resultados codificados com JSON executeScript)

Uma vez que o resultado de ExecuteScriptAsync é codificado em JSON, se o resultado da avaliação do JavaScript for uma cadeia, receberá uma cadeia codificada com JSON e não o valor da cadeia.

Por exemplo, o código seguinte executa o script que resulta numa cadeia. A cadeia 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 devolve uma cadeia que ExecuteScript o JSON-encodes para si. Se chamar JSON.stringify a partir do script, o resultado é codificado duplamente como uma cadeia JSON do valor de uma cadeia JSON.

Apenas 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, pelo que terá de copiar explicitamente os respetivos valores para outro objeto para devolver. Por exemplo:

Quando devolvemos apenas performance.memory não vemos nenhuma das respetivas propriedades no resultado porque todas as propriedades são herdadas. Se, em vez disso, copiarmos valores de propriedade específicos de performance.memory para o nosso novo objeto para devolver, vemos essas propriedades no resultado.

Ao executar o script através ExecuteScriptAsync desse script, é executado no contexto global. Ajuda ter o seu script numa função anónima para que as variáveis que definir não poluam o contexto global.

Por exemplo:

• Se executar o script const example = 10; mais do que uma vez, as vezes subsequentes em que executar o script irão gerar uma exceção, porque example foi definida na primeira vez que o executou.

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

Cenário: Executar um ficheiro de script dedicado

Nesta secção, vai aceder a um ficheiro JavaScript dedicado a partir do seu controlo WebView2.

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

1. Crie um .js ficheiro no seu projeto e adicione o código JavaScript que pretende executar. Por exemplo, crie um ficheiro chamado script.js.

2. Converta o ficheiro JavaScript numa cadeia que é transmitida para ExecuteScriptAsync, ao colar o seguinte código após a página terminar de navegar:

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

3. Transmita a variável de texto com ExecuteScriptAsync:

   await webView.CoreWebView2.ExecuteScriptAsync(text);
   

Cenário: Remover a funcionalidade de arrastar e largar

Nesta secção, vai utilizar o JavaScript para remover a funcionalidade de arrastar e largar do controlo WebView2.

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

1. Crie um .txt ficheiro para arrastar e largar. Por exemplo, crie um ficheiro com o nome contoso.txt e adicione texto ao mesmo.

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

3. Arraste e largue o contoso.txt ficheiro no controlo WebView2. É aberta uma nova janela, que é o resultado do código no projeto de exemplo:

   

4. Em seguida, adicione código para remover a funcionalidade de arrastar e largar do controlo WebView2. Cole o seguinte código depois de o objeto CoreWebView2 ser inicializado no 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 largar contoso.txt no controlo WebView2. Confirme que não pode arrastar e largar.

Cenário: Remover o menu de contexto

Nesta secção, irá remover o menu de contexto do controlo WebView2.

Para começar, explore a funcionalidade atual do menu de contexto:

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

2. Clique com o botão direito do rato em qualquer lugar no controlo WebView2. O menu de contexto apresenta os comandos predefinidos do menu de contexto:

   

   Em seguida, adicione código para remover a funcionalidade do menu de contexto do controlo WebView2.

3. Cole o seguinte código depois de o objeto CoreWebView2 ser inicializado no código:

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

4. Clique em F5 para compilar e executar o projeto. Confirme que não consegue abrir um menu de contexto.

Confira também

• Introdução ao WebView2
• Repositório WebView2Samples - um exemplo abrangente de capacidades do WebView2.
• Referência da API webView2
• Interoperabilidade Web/nativa na Descrição Geral das APIs WebView2.