cordova-plugin-inappbrowser
Вы можете отображать полезные статьи, видео и веб-ресурсы внутри своего приложения. Пользователи могут просматривать веб-страницы, не покидая ваше приложение.
Для получения нескольких идей, ознакомьтесь с примером внизу этой страницы или перейдите непосредственно к ссылкам.
Этот плагин предоставляет представление веб-браузера, которое отображается при вызове cordova.InAppBrowser.open().
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
window.open
Функция cordova.InAppBrowser.open() определена как замена функции window.open(). Существующие вызовы window.open() могут использовать окно InAppBrowser, заменив window.open:
window.open = cordova.InAppBrowser.open;
Окно InAppBrowser ведет себя как стандартный веб-браузер и не может получить доступ к API Cordova. По этой причине InAppBrowser рекомендуется, если вам нужно загружать сторонний (ненадёжный) контент, вместо загрузки этого контента в основную веб-вью Cordova. InAppBrowser не подчиняется списку разрешённых доменов (whitelist), а также открытие ссылок в системном браузере не влияет на него.
InAppBrowser по умолчанию предоставляет собственные элементы управления пользовательским интерфейсом (назад, вперёд, готово).
Для обеспечения обратной совместимости этот плагин также подключает window.open. Однако, подключенный плагином обработчик window.open может иметь нежелательные побочные эффекты (особенно если этот плагин включён только как зависимость другого плагина). Обработчик window.open будет удалён в будущих крупных выпусках. Пока обработчик не удалён из плагина, приложения могут вручную восстановить стандартное поведение:
delete window.open // Reverts the call back to its prototype's default
Хотя window.open находится в глобальном пространстве имён, InAppBrowser недоступен до события deviceready.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("window.open works well");
}
Установка
cordova plugin add cordova-plugin-inappbrowser
Если вы хотите, чтобы все загрузки страниц в вашем приложении проходили через InAppBrowser, вы можете просто подключить window.open во время инициализации. Например:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.open = cordova.InAppBrowser.open;
}
cordova.InAppBrowser.open
Открывает URL в новом InAppBrowser экземпляре, текущем экземпляре браузера или системном браузере.
var ref = cordova.InAppBrowser.open(url, target, options);
ref: Ссылка на окно
InAppBrowserпри установке параметра target в'_blank'. (InAppBrowser)url: URL для загрузки (строка). Вызовите
encodeURI()для этого, если URL содержит символы Unicode.-
target: Цель для загрузки URL, необязательный параметр по умолчанию
_self. (строка)-
_self: Открывает в Cordova WebView, если URL находится в списке разрешённых доменов (whitelist), в противном случае открывает вInAppBrowser. -
_blank: Открывает вInAppBrowser. -
_system: Открывает в системном веб-браузере.
-
-
options: Параметры для
InAppBrowser. Необязательный параметр, по умолчанию:location=yes. (строка)Строка
optionsне должна содержать пробелов, а пары имя/значение каждого параметра должны быть разделены запятыми. Имена параметров не чувствительны к регистру.Все платформы поддерживают:
-
location: Установите в значение
yesилиnoдля включения или выключения строки состояния (InAppBrowser).
Android поддерживает следующие дополнительные параметры:
-
hidden: установите в
yesдля создания браузера и загрузки страницы, но не отображения её. Событие loadstop срабатывает после завершения загрузки. Пропустите или установите в значениеno(по умолчанию), чтобы браузер открылся и загрузил страницу обычным образом. -
beforeload: установите, чтобы включить событие
beforeloadдля изменения того, какие страницы фактически загружаются в браузере. Допустимые значения:getдля перехвата только запросов GET,postдля перехвата запросов POST илиyesдля перехвата запросов GET и POST. Обратите внимание, что запросы POST в настоящее время не поддерживаются и будут проигнорированы (если вы установитеbeforeload=post, это вызовет ошибку). -
clearcache: установите в
yesдля очистки кэша cookie браузера перед открытием нового окна. -
clearsessioncache: установите в
yesдля очистки кэша сессионных cookie перед открытием нового окна. - closebuttoncaption: установите строку для использования в качестве подписи кнопки закрытия вместо X. Обратите внимание, что вам нужно самостоятельно локализовать это значение.
-
closebuttoncolor: установите допустимую строку шестнадцатеричного цвета, например:
#00ff00, для изменения цвета кнопки закрытия от значения по умолчанию, независимо от того, текст или X. Действует только если установлен location =yes. -
footer: установите в
yesдля отображения кнопки закрытия в футере, аналогично кнопке Готово в iOS. Кнопка закрытия будет выглядеть так же, как в заголовке, поэтому используйте closebuttoncaption и closebuttoncolor для настройки ее свойств. -
footercolor: установите допустимую строку шестнадцатеричного цвета, например
#00ff00или#CC00ff00(#aarrggbb), чтобы изменить цвет футера от значения по умолчанию. Действует только если footer установлен вyes. -
hardwareback: установите в
yesдля использования аппаратной кнопки "Назад" для навигации назад по историиInAppBrowser. Если нет предыдущей страницы,InAppBrowserзакроется. Значение по умолчанию -yes, поэтому вам нужно установить его вnoесли вы хотите, чтобы кнопка "Назад" просто закрывала InAppBrowser. -
hidenavigationbuttons: установите в
yesдля скрытия кнопок навигации в строке состояния, действует только если user location установлен вyes. Значение по умолчаниюno. -
hideurlbar: установите в
yesдля скрытия строки адреса в строке состояния, действует только если user location установлен вyes. Значение по умолчаниюno. -
navigationbuttoncolor: установите допустимую строку шестнадцатеричного цвета, например:
#00ff00, для изменения цвета обеих кнопок навигации от значения по умолчанию. Действует только если user location установлен вyesи hidenavigationbuttons не установлен вyes. -
toolbarcolor: установите допустимую строку шестнадцатеричного цвета, например:
#00ff00, для изменения цвета панели инструментов от значения по умолчанию. Действует только если user location установлен вyes. -
lefttoright: установите в
yesдля изменения расположения кнопок навигации и кнопки закрытия. То есть кнопки навигации слева, а кнопка закрытия справа. -
zoom: установите в
yesдля отображения элементов управления масштабированием браузера Android, установите вnoдля их скрытия. Значение по умолчаниюyes. -
mediaPlaybackRequiresUserAction: установите в
yesдля предотвращения автоматической воспроизведения аудио или видео HTML5 (по умолчаниюno). -
shouldPauseOnSuspend: Установите в
yesдля приостановки/возобновления InAppBrowser WebView вместе с приложением для остановки воспроизведения звука на заднем плане (это может потребоваться для устранения проблем Google Play, как описано в CB-11013). -
useWideViewPort: Устанавливает, должен ли WebView поддерживать тег HTML meta "viewport" или использовать широкий viewport. При значении
no, ширина макета всегда соответствует ширине элемента управления WebView в независимых от устройства (CSS) пикселях. При значенииyesи наличии в странице тега meta viewport, используется значение ширины, указанное в теге. Если тег отсутствует или не содержит ширины, используется широкий viewport. (По умолчаниюyes).
iOS поддерживает следующие дополнительные параметры:
-
location: Установите в значение
-
usewkwebview: устанавливается в значение
yesдля использования движка WKWebView для InappBrowser. Опустить или установить в значениеno(по умолчанию) для использования UIWebView. Примечание: Использованиеusewkwebview=yesтребует установки плагина WKWebView в проекте Cordova (например, cordova-plugin-wkwebview-engine или cordova-plugin-ionic-webview). -
hidden: устанавливается в значение
yesдля создания браузера и загрузки страницы, но не отображения её. Событие loadstop срабатывает при завершении загрузки. Опустить или установить в значениеno(по умолчанию) для открытия и нормальной загрузки браузера. -
beforeload: устанавливается для включения события
beforeloadдля изменения страниц, которые фактически загружаются в браузере. Допустимые значения:getдля перехвата только запросов GET,postдля перехвата запросов POST илиyesдля перехвата запросов GET и POST. Обратите внимание, что запросы POST в настоящее время не поддерживаются и будут игнорироваться (если установитьbeforeload=post, будет выведено сообщение об ошибке). -
clearcache: устанавливается в значение
yesдля очистки кэша куки браузера перед открытием нового окна -
clearsessioncache: устанавливается в значение
yesдля очистки кэша куки сессии перед открытием нового окна. Для WKWebView требуется iOS 11+ на целевом устройстве. -
cleardata: устанавливается в значение
yesдля очистки всего локального хранилища браузера (куки, локальное хранилище HTML5, IndexedDB и т. д.) перед открытием нового окна -
closebuttoncolor: задается как допустимая строка шестнадцатеричного цвета, например:
#00ff00, для изменения цвета кнопки Готово по умолчанию. Применимо только если панель инструментов не отключена. - closebuttoncaption: устанавливается в строку, используемую в качестве заголовка кнопки Готово. Обратите внимание, что вам нужно локализовать это значение самостоятельно.
-
disallowoverscroll: Устанавливается в значение
yesилиno(по умолчаниюno). Включает/выключает свойство UIWebViewBounce. -
hidenavigationbuttons: устанавливается в
yesилиnoдля включения или отключения кнопок навигации панели инструментов (по умолчаниюno). Применимо только если панель инструментов не отключена. -
navigationbuttoncolor: устанавливается как допустимая строка шестнадцатеричного цвета, например:
#00ff00, для изменения цвета по умолчанию. Применимо только если кнопки навигации видны. -
toolbar: устанавливается в
yesилиnoдля включения или отключения панели инструментов для InAppBrowser (по умолчаниюyes). -
toolbarcolor: устанавливается как допустимая строка шестнадцатеричного цвета, например:
#00ff00, для изменения цвета панели инструментов по умолчанию. Применимо только если панель инструментов не отключена. -
toolbartranslucent: устанавливается в
yesилиnoдля создания полупрозрачной панели инструментов (по умолчаниюyes). Применимо только если панель инструментов не отключена. -
lefttoright: Устанавливается в
yesдля перестановки позиций кнопок навигации и кнопки закрытия. В частности, кнопка закрытия переходит вправо, а кнопки навигации - влево. -
enableViewportScale: Устанавливается в
yesилиnoдля предотвращения масштабирования просмотра с помощью тега meta (по умолчаниюno). Применимо только к UIWebView (usewkwebview=no) и WKWebView (usewkwebview=yes) на iOS 10+. -
mediaPlaybackRequiresUserAction: Устанавливается в
yesдля предотвращения автоматического воспроизведения аудио или видео HTML5 (по умолчаниюno). Применимо к UIWebView (usewkwebview=no) и WKWebView (usewkwebview=yes). -
allowInlineMediaPlayback: Устанавливается в
yesилиnoдля разрешения встроенного воспроизведения медиа HTML5, отображая его внутри окна браузера вместо интерфейса воспроизведения устройства. Элемент HTMLvideoтакже должен содержать атрибутwebkit-playsinline(по умолчаниюno). Применимо к UIWebView (usewkwebview=no) и WKWebView (usewkwebview=yes). -
keyboardDisplayRequiresUserAction: Устанавливается в
yesилиnoдля открытия клавиатуры, когда элементы формы получают фокус через вызов JavaScript'sfocus()(по умолчаниюyes). Применимо только к UIWebView (usewkwebview=no). -
suppressesIncrementalRendering: Устанавливается в
yesилиnoдля ожидания получения всего нового содержимого представления перед отрисовкой (по умолчаниюno). Применимо только к UIWebView (usewkwebview=no). -
presentationstyle: Устанавливается в
pagesheet,formsheetилиfullscreenдля установки стиля представления presentation style (по умолчаниюfullscreen). -
transitionstyle: Устанавливается в
fliphorizontal,crossdissolveилиcoververticalдля установки стиля перехода transition style (по умолчаниюcoververtical). -
toolbarposition: Устанавливается в
topилиbottom(по умолчаниюbottom). Размещает панель инструментов в верхней или нижней части окна. -
hidespinner: Устанавливается в
yesилиnoдля изменения видимости индикатора загрузки (по умолчаниюno).
В окнах поддерживаются следующие дополнительные параметры:
-
hidden: устанавливается в
yesдля создания браузера и загрузки страницы, но не отображения её. Событие loadstop срабатывает при завершении загрузки. Опустить или установить вno(по умолчанию), чтобы браузер открылся и загрузился нормально. - hardwareback: работает так же, как и на платформе Android.
-
fullscreen: устанавливается в
yesдля создания элемента управления браузера без рамки вокруг него. Обратите внимание, что если также указан параметр location=no, пользователю не будет представлено управления для закрытия окна IAB.
-
usewkwebview: устанавливается в значение
Поддерживаемые платформы
- Android
- Браузер
- iOS
- OSX
- Windows
Пример
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
var ref2 = cordova.InAppBrowser.open(encodeURI('http://ja.m.wikipedia.org/wiki/ハングル'), '_blank', 'location=yes');
Особенности OSX
В настоящее время единственной поддерживаемой целью в OSX является _system.
_blank и _self цели пока не реализованы и игнорируются.
Особенности браузера
Плагин реализован через iframe,
История навигации (кнопки
backиforwardв строке адреса) не реализована.
InAppBrowser
Объект, возвращаемый при вызове cordova.InAppBrowser.open при установке параметра назначения на '_blank'.
Методы
- addEventListener
- removeEventListener
- close
- show
- hide
- executeScript
- insertCSS
InAppBrowser.addEventListener
Добавляет обработчик события от
InAppBrowser. (Доступен только когда параметр назначения установлен на'_blank')
ref.addEventListener(eventname, callback);
ref: ссылка на окно
InAppBrowser(InAppBrowser)-
eventname: событие для прослушивания (Строка)
-
loadstart: событие срабатывает, когда
InAppBrowserначинает загружать URL. -
loadstop: событие срабатывает, когда
InAppBrowserзавершает загрузку URL. -
loaderror: событие срабатывает, когда
InAppBrowserсталкивается с ошибкой при загрузке URL. -
exit: событие срабатывает, когда окно
InAppBrowserзакрывается. -
beforeload: событие срабатывает, когда
InAppBrowserпринимает решение загружать URL или нет (только с параметромbeforeload). -
message: событие срабатывает, когда
InAppBrowserполучает сообщение, отправленное из страницы, загруженной внутриInAppBrowserWebview.
-
loadstart: событие срабатывает, когда
callback: функция, выполняемая при срабатывании события. Функция получает объект
InAppBrowserEventв качестве параметра.
Пример
var inAppBrowserRef;
function showHelp(url) {
var target = "_blank";
var options = "location=yes,hidden=yes,beforeload=yes";
inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);
inAppBrowserRef.addEventListener('loadstart', loadStartCallBack);
inAppBrowserRef.addEventListener('loadstop', loadStopCallBack);
inAppBrowserRef.addEventListener('loaderror', loadErrorCallBack);
inAppBrowserRef.addEventListener('beforeload', beforeloadCallBack);
inAppBrowserRef.addEventListener('message', messageCallBack);
}
function loadStartCallBack() {
$('#status-message').text("loading please wait ...");
}
function loadStopCallBack() {
if (inAppBrowserRef != undefined) {
inAppBrowserRef.insertCSS({ code: "body{font-size: 25px;" });
inAppBrowserRef.executeScript({ code: "\
var message = 'this is the message';\
var messageObj = {my_message: message};\
var stringifiedMessageObj = JSON.stringify(messageObj);\
webkit.messageHandlers.cordova_iab.postMessage(stringifiedMessageObj);"
});
$('#status-message').text("");
inAppBrowserRef.show();
}
}
function loadErrorCallBack(params) {
$('#status-message').text("");
var scriptErrorMesssage =
"alert('Sorry we cannot open that page. Message from the server is : "
+ params.message + "');"
inAppBrowserRef.executeScript({ code: scriptErrorMesssage }, executeScriptCallBack);
inAppBrowserRef.close();
inAppBrowserRef = undefined;
}
function executeScriptCallBack(params) {
if (params[0] == null) {
$('#status-message').text(
"Sorry we couldn't open that page. Message from the server is : '"
+ params.message + "'");
}
}
function beforeloadCallBack(params, callback) {
if (params.url.startsWith("http://www.example.com/")) {
// Load this URL in the inAppBrowser.
callback(params.url);
} else {
// The callback is not invoked, so the page will not be loaded.
$('#status-message').text("This browser only opens pages on http://www.example.com/");
}
}
function messageCallBack(params){
$('#status-message').text("message received: "+params.data.my_message);
}
Свойства InAppBrowserEvent
type: событие, либо
loadstart,loadstop,loaderror,messageилиexit. (Строка)url: загруженный URL. (Строка)
code: код ошибки, только в случае
loaderror. (Число)message: сообщение об ошибке, только в случае
loaderror. (Строка)data: содержимое сообщения, только в случае
message. Объект JSON в строковом формате. (Строка)
Поддерживаемые платформы
- Android
- Браузер
- iOS
- Windows
- OSX
Особенности браузера
События loadstart, loaderror, message не генерируются.
Особенности Windows
Событие message не генерируется.
Быстрый пример
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert(event.url); });
InAppBrowser.removeEventListener
Удаляет обработчик события от
InAppBrowser. (Доступен только когда параметр назначения установлен на'_blank')
ref.removeEventListener(eventname, callback);
ref: ссылка на окно
InAppBrowser. (InAppBrowser)-
eventname: событие, на которое нужно перестать подписываться. (Строка)
-
loadstart: событие срабатывает, когда
InAppBrowserначинает загружать URL. -
loadstop: событие срабатывает, когда
InAppBrowserзавершает загрузку URL. -
loaderror: событие срабатывает, когда
InAppBrowserсталкивается с ошибкой при загрузке URL. -
exit: событие срабатывает, когда окно
InAppBrowserзакрывается. -
message: событие срабатывает, когда
InAppBrowserполучает сообщение, отправленное со страницы, загруженной внутриInAppBrowserWebview.
-
loadstart: событие срабатывает, когда
callback: функция, которая выполняется при срабатывании события. Функции передается объект
InAppBrowserEvent.
Поддерживаемые платформы
- Android
- Браузер
- iOS
- Windows
Быстрый пример
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
var myCallback = function(event) { alert(event.url); }
ref.addEventListener('loadstart', myCallback);
ref.removeEventListener('loadstart', myCallback);
InAppBrowser.close
Закрывает окно
InAppBrowser.
ref.close();
-
ref: ссылка на окно
InAppBrowser(InAppBrowser)
Поддерживаемые платформы
- Android
- Браузер
- iOS
- Windows
Быстрый пример
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.close();
InAppBrowser.show
Отображает окно InAppBrowser, которое было открыто скрытым. Вызов не имеет эффекта, если InAppBrowser уже был виден.
ref.show();
-
ref: ссылка на окно InAppBrowser (
InAppBrowser)
Поддерживаемые платформы
- Android
- Браузер
- iOS
- Windows
Быстрый пример
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'hidden=yes');
// some time later...
ref.show();
InAppBrowser.hide
Скрывает окно InAppBrowser. Вызов не имеет эффекта, если InAppBrowser уже был скрыт.
ref.hide();
-
ref: ссылка на окно InAppBrowser (
InAppBrowser)
Поддерживаемые платформы
- Android
- iOS
- Windows
Быстрый пример
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank');
// some time later...
ref.hide();
InAppBrowser.executeScript
Вставляет код JavaScript в окно
InAppBrowser. (Доступно только при установленном целевом параметре'_blank')
ref.executeScript(details, callback);
ref: ссылка на окно
InAppBrowser. (InAppBrowser)-
injectDetails: детали скрипта для выполнения, указав ключ
fileилиcode. (Объект)- file: URL скрипта для вставки.
- code: Текст скрипта для вставки.
-
callback: функция, которая выполняется после вставки кода JavaScript.
- Если вставленный скрипт типа
code, callback выполняется с единственным параметром, который является возвращаемым значением скрипта, заключённым вArray. Для многострочных скриптов это возвращаемое значение последней инструкции или последнего выражения, вычисленного.
- Если вставленный скрипт типа
Поддерживаемые платформы
- Android
- Браузер
- iOS
- Windows
Быстрый пример
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
ref.executeScript({file: "myscript.js"});
});
Особенности браузера
- поддерживается только ключ code.
Особенности Windows
Из-за MSDN документации вызванный скрипт может вернуть только строковые значения, в противном случае параметр, передаваемый в callback, будет [null].
InAppBrowser.insertCSS
Вставляет CSS в окно
InAppBrowser. (Доступно только при установленном целевом параметре'_blank')
ref.insertCSS(details, callback);
ref: ссылка на окно
InAppBrowser(InAppBrowser)-
injectDetails: детали скрипта для выполнения, указав ключ
fileилиcode. (Объект)- file: URL таблицы стилей для вставки.
- code: Текст таблицы стилей для вставки.
callback: функция, которая выполняется после вставки CSS.
Поддерживаемые платформы
- Android
- iOS
- Windows
Быстрый пример
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
ref.insertCSS({file: "mystyles.css"});
});
__
Пример: Отображение страниц справки с помощью InAppBrowser
Вы можете использовать этот плагин для отображения полезных страниц документации в приложении. Пользователи могут просматривать онлайн-документы справки и затем закрывать их, не покидая приложение.
Вот несколько фрагментов, которые показывают, как это сделать.
- Предоставьте пользователям способ запросить помощь.
- Загрузить страницу справки.
- Уведомить пользователей о подготовке страницы.
- Показать страницу справки.
- Обработка ошибок страницы.
Предоставьте пользователям способ запросить помощь
Существует множество способов сделать это в вашем приложении. Выпадающий список — простой способ для этого.
<select id="help-select">
<option value="default">Need help?</option>
<option value="article">Show me a helpful article</option>
<option value="video">Show me a helpful video</option>
<option value="search">Search for other topics</option>
</select>
Соберите выбор пользователя в функции onDeviceReady страницы, а затем отправьте соответствующий URL в вспомогательную функцию в файле общей библиотеки. Наша вспомогательная функция называется showHelp() и мы напишем её дальше.
$('#help-select').on('change', function (e) {
var url;
switch (this.value) {
case "article":
url = "https://cordova.apache.org/docs/en/latest/"
+ "reference/cordova-plugin-inappbrowser/index.html";
break;
case "video":
url = "https://youtu.be/F-GlVrTaeH0";
break;
case "search":
url = "https://www.google.com/#q=inAppBrowser+plugin";
break;
}
showHelp(url);
});
Загрузить страницу справки
Мы воспользуемся функцией open для загрузки страницы справки. Мы устанавливаем свойство hidden в yes, чтобы мы могли показать браузер только после загрузки содержимого страницы. Таким образом, пользователи не видят пустой браузер, пока ждут появления содержимого. Когда срабатывает событие loadstop, мы узнаем, когда содержимое загрузится. Мы обработаем это событие вскоре.
function showHelp(url) {
var target = "_blank";
var options = "location=yes,hidden=yes";
inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);
inAppBrowserRef.addEventListener('loadstart', loadStartCallBack);
inAppBrowserRef.addEventListener('loadstop', loadStopCallBack);
inAppBrowserRef.addEventListener('loaderror', loadErrorCallBack);
}
Уведомить пользователей о подготовке страницы
Поскольку браузер не появляется сразу, мы можем использовать событие loadstart для отображения сообщения о статусе, индикатора прогресса или других индикаторов. Это гарантирует пользователям, что содержимое скоро появится.
function loadStartCallBack() {
$('#status-message').text("loading please wait ...");
}
Показать страницу справки
Когда срабатывает событие loadstopcallback, мы знаем, что содержимое загрузилось, и можем сделать браузер видимым. Такой трюк может создать впечатление о лучшей производительности. На самом деле, показываете ли вы браузер до загрузки содержимого или нет, время загрузки остается неизменным.
function loadStopCallBack() {
if (inAppBrowserRef != undefined) {
inAppBrowserRef.insertCSS({ code: "body{font-size: 25px;" });
$('#status-message').text("");
inAppBrowserRef.show();
}
}
Вы, возможно, заметили вызов функции insertCSS. В нашем случае это не имеет особой цели. Но это даёт вам представление о том, зачем вы можете её использовать. В данном случае мы просто убеждаемся, что размер шрифта ваших страниц имеет определённый размер. Вы можете использовать эту функцию для вставки любых элементов CSS-стилей. Вы даже можете указать на файл CSS в вашем проекте.
Обработка ошибок страницы
Иногда страница больше не существует, возникает ошибка скрипта или у пользователя нет разрешения на просмотр ресурса. Как и обрабатывать такую ситуацию — полностью зависит от вас и вашего дизайна. Вы можете позволить браузеру показать это сообщение, или вы можете представить его иначе.
Мы попробуем показать эту ошибку в окне сообщения. Мы можем сделать это, вставив скрипт, который вызывает функцию alert. Однако это не будет работать в браузерах на устройствах Windows, поэтому нам придётся посмотреть на параметр функции обратного вызова executeScript, чтобы увидеть, удалось ли нам это. Если это не сработало, мы просто отобразим сообщение об ошибке в <div> на странице.
function loadErrorCallBack(params) {
$('#status-message').text("");
var scriptErrorMesssage =
"alert('Sorry we cannot open that page. Message from the server is : "
+ params.message + "');"
inAppBrowserRef.executeScript({ code: scriptErrorMesssage }, executeScriptCallBack);
inAppBrowserRef.close();
inAppBrowserRef = undefined;
}
function executeScriptCallBack(params) {
if (params[0] == null) {
$('#status-message').text(
"Sorry we couldn't open that page. Message from the server is : '"
+ params.message + "'");
}
}
Дополнительная информация об использовании
Локальные URL-адреса (исходный код находится в пакете приложения)
var iab = cordova.InAppBrowser;
iab.open('local-url.html'); // loads in the Cordova WebView
iab.open('local-url.html', '_self'); // loads in the Cordova WebView
iab.open('local-url.html', '_system'); // Security error: system browser, but url will not load (iOS)
iab.open('local-url.html', '_blank'); // loads in the InAppBrowser
iab.open('local-url.html', 'random_string'); // loads in the InAppBrowser
iab.open('local-url.html', 'random_string', 'location=no'); // loads in the InAppBrowser, no location bar
Разрешённое содержимое
var iab = cordova.InAppBrowser;
iab.open('http://whitelisted-url.com'); // loads in the Cordova WebView
iab.open('http://whitelisted-url.com', '_self'); // loads in the Cordova WebView
iab.open('http://whitelisted-url.com', '_system'); // loads in the system browser
iab.open('http://whitelisted-url.com', '_blank'); // loads in the InAppBrowser
iab.open('http://whitelisted-url.com', 'random_string'); // loads in the InAppBrowser
iab.open('http://whitelisted-url.com', 'random_string', 'location=no'); // loads in the InAppBrowser, no location bar
URL-адреса, не включённые в белый список
var iab = cordova.InAppBrowser;
iab.open('http://url-that-fails-whitelist.com'); // loads in the InAppBrowser
iab.open('http://url-that-fails-whitelist.com', '_self'); // loads in the InAppBrowser
iab.open('http://url-that-fails-whitelist.com', '_system'); // loads in the system browser
iab.open('http://url-that-fails-whitelist.com', '_blank'); // loads in the InAppBrowser
iab.open('http://url-that-fails-whitelist.com', 'random_string'); // loads in the InAppBrowser
iab.open('http://url-that-fails-whitelist.com', 'random_string', 'location=no'); // loads in the InAppBrowser, no location bar
© 2012, 2013, 2015 The Apache Software Foundation
Licensed under the Apache License 2.0.
https://cordova.apache.org/docs/en/9.x/reference/cordova-plugin-inappbrowser/index.html