Cordova - InAppBrowser

Este plugin é usado para abrir o navegador da web dentro do aplicativo Cordova.

Etapa 1 - Instalando o plug-in

Precisamos instalar este plugin em command prompt janela antes que possamos usá-lo.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

Etapa 2 - botão Adicionar

Vamos adicionar um botão que será usado para abrir inAppBrowser janela em index.html.

Etapa 3 - Adicionar Listener de Evento

Agora vamos adicionar ouvinte de evento para nosso botão em onDeviceReady função em index.js.

document.getElementById("openBrowser").addEventListener("click", openBrowser);

Etapa 4 - Criar Função

Nesta etapa estamos criando uma função que abrirá o navegador dentro de nosso aplicativo. Estamos atribuindo isso aoref variável que podemos usar posteriormente para adicionar ouvintes de eventos.

function openBrowser() {
   var url = 'https://cordova.apache.org';
   var target = '_blank';
   var options = "location = yes"
   var ref = cordova.InAppBrowser.open(url, target, options);
   
   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {
      console.log('Browser is closed...')
   }
}

Se pressionarmos BROWSER botão, veremos a seguinte saída na tela.

O console também ouvirá eventos. loadstart evento será disparado quando o URL começar a carregar e loadstopserá disparado quando o URL for carregado. Podemos ver no console.

Assim que fechamos o navegador, exit evento irá disparar.

Existem outras opções possíveis para a janela InAppBrowser. Explicaremos na tabela abaixo.

S.Não	opção e detalhes
1	location Usado para ligar ou desligar a barra de localização do navegador. Os valores sãoyes ou no.
2	hidden Usado para ocultar ou mostrar noAppBrowser. Os valores sãoyes ou no.
3	clearCache Usado para limpar o cache de cookies do navegador. Os valores sãoyes ou no.
4	clearsessioncache Usado para limpar o cache do cookie da sessão. Os valores sãoyes ou no.
5	zoom Usado para ocultar ou mostrar os controles de zoom do navegador Android. Os valores sãoyes ou no.
6	hardwareback yes para usar o botão Voltar do hardware para navegar de volta pelo histórico do navegador. no para fechar o navegador quando o botão Voltar for clicado.

Podemos usar ref(referência) variável para algumas outras funcionalidades. Mostraremos apenas exemplos rápidos disso. Para remover ouvintes de eventos, podemos usar -

ref.removeEventListener(eventname, callback);

Para fechar InAppBrowser, podemos usar -

ref.close();

Se abrirmos uma janela oculta, podemos mostrá-la -

ref.show();

Até mesmo o código JavaScript pode ser injetado no InAppBrowser -

var details = "javascript/file/url"
ref.executeScript(details, callback);

O mesmo conceito pode ser usado para injetar CSS -

var details = "css/file/url"
ref.inserCSS(details, callback);