Cordova - InAppBrowser

Ta wtyczka służy do otwierania przeglądarki internetowej w aplikacji Cordova.

Krok 1 - Instalacja wtyczki

Musimy zainstalować tę wtyczkę w command prompt zanim będziemy mogli z niego skorzystać.

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

Krok 2 - Dodaj przycisk

Dodamy jeden przycisk, który posłuży do otwierania inAppBrowser okno w index.html.

Krok 3 - Dodaj odbiornik zdarzeń

Teraz dodajmy detektor zdarzeń dla naszego przycisku w onDeviceReady funkcja w index.js.

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

Krok 4 - Utwórz funkcję

W tym kroku tworzymy funkcję, która otworzy przeglądarkę w naszej aplikacji. Przypisujemy go doref zmienna, której możemy później użyć do dodania detektorów zdarzeń.

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...')
   }
}

Jeśli naciśniemy BROWSER przycisk, zobaczymy następujące dane wyjściowe na ekranie.

Konsola będzie również nasłuchiwała zdarzeń. loadstart zdarzenie zostanie uruchomione po rozpoczęciu ładowania adresu URL i loadstopuruchomi się po załadowaniu adresu URL. Możemy to zobaczyć w konsoli.

Po zamknięciu przeglądarki exit zdarzenie wybuchnie.

Istnieją inne możliwe opcje okna InAppBrowser. Wyjaśnimy to w poniższej tabeli.

S.Nr	opcja i szczegóły
1	location Służy do włączania lub wyłączania paska adresu przeglądarki. Wartości sąyes lub no.
2	hidden Służy do ukrywania lub wyświetlania wAppBrowser. Wartości sąyes lub no.
3	clearCache Służy do czyszczenia pamięci podręcznej plików cookie przeglądarki. Wartości sąyes lub no.
4	clearsessioncache Służy do czyszczenia pamięci podręcznej plików cookie sesji. Wartości sąyes lub no.
5	zoom Służy do ukrywania lub pokazywania elementów sterujących powiększeniem przeglądarki Androida. Wartości sąyes lub no.
6	hardwareback yes aby użyć sprzętowego przycisku Wstecz, aby wrócić do historii przeglądarki. no aby zamknąć przeglądarkę po kliknięciu przycisku Wstecz.

Możemy użyć ref(odniesienie) zmienna dla niektórych innych funkcji. Pokażemy Ci tylko krótkie przykłady. Do usuwania nasłuchiwaczy zdarzeń możemy użyć -

ref.removeEventListener(eventname, callback);

Do zamknięcia InAppBrowser możemy użyć -

ref.close();

Jeśli otworzyliśmy ukryte okno, możemy je pokazać -

ref.show();

Nawet kod JavaScript można wstrzyknąć do InAppBrowser -

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

Tej samej koncepcji można użyć do wstrzykiwania CSS -

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