Кордова — InAppBrowser

Этот плагин используется для открытия веб-браузера внутри приложения Cordova.

Шаг 1 — Установка плагина

Нам нужно установить этот плагин в окне командной строки, прежде чем мы сможем его использовать.

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

Шаг 2 — Добавить кнопку

Мы добавим одну кнопку, которая будет использоваться для открытия окна inAppBrowser в index.html .

Шаг 3 — Добавить прослушиватель событий

Теперь давайте добавим прослушиватель событий для нашей кнопки в функцию onDeviceReady в index.js .

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

Шаг 4 — Создать функцию

На этом этапе мы создаем функцию, которая открывает браузер внутри нашего приложения. Мы присваиваем его переменной ref, которую мы можем использовать позже для добавления прослушивателей событий.

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

Если мы нажмем кнопку БРАУЗЕР , мы увидим следующий вывод на экране.

Консоль также будет слушать события. Событие loadstart сработает, когда начнется загрузка URL, и loadtop сработает при загрузке URL. Мы можем видеть это в консоли.

Как только мы закроем браузер, событие выхода будет запущено.

Есть и другие возможные варианты для окна InAppBrowser. Мы объясним это в таблице ниже.

место нахождения

Используется для включения или выключения строки адреса браузера. Значения да или нет .

скрытый

Используется, чтобы скрыть или показать в AppBrowser. Значения да или нет .

очистить кэш

Используется для очистки кэша cookie браузера. Значения да или нет .

clearsessioncache

Используется для очистки кэша cookie сессии. Значения да или нет .

зум

Используется, чтобы скрыть или показать элементы управления масштабированием браузера Android. Значения да или нет .

hardwareback

Да, чтобы использовать аппаратную кнопку «Назад» для перехода назад по истории браузера. нет, чтобы закрыть браузер после нажатия кнопки «Назад».

Мы можем использовать переменную ref (reference) для некоторых других функций. Мы покажем вам только быстрые примеры этого. Для удаления слушателей событий мы можем использовать —

ref.removeEventListener(eventname, callback); 

Для закрытия InAppBrowser мы можем использовать —

ref.close();

Если мы открыли скрытое окно, мы можем показать его —

ref.show();

Даже код JavaScript может быть введен в InAppBrowser —

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

Та же концепция может быть использована для введения CSS —