InAppBrowser
InAppBrowserЭто веб-браузер, который отображается в приложении, при вызовеwindow.open.
var ref = window.open('http://apache.org', '_blank', 'location=yes');
Описание
Объект, возвращаемый из вызоваwindow.open.
Методы
- addEventListener
- removeEventListener
- close
- show
- executeScript
- insertCSS
Доступ к функции
Начиная с версии 3.0 Кордова реализует интерфейсы API уровень устройства как плагины. Использование CLI plugin команды, описанные в интерфейс командной строки, чтобы добавить или удалить эту функцию для проекта:
$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
$ cordova plugin rm org.apache.cordova.core.inappbrowser
Эти команды применяются для всех целевых платформ, но изменить параметры конфигурации платформы, описанные ниже:
-
Android (в
app/res/xml/config.xml)<feature name="InAppBrowser"> <param name="android-package" value="org.apache.cordova.InAppBrowser" /> </feature> -
iOS (в
config.xml)<feature name="InAppBrowser"> <param name="ios-package" value="CDVInAppBrowser" /> </feature> -
Windows Phone 7 и 8 (в
config.xml)<feature name="InAppBrowser" />
Некоторые платформы могут поддерживать эту функцию без необходимости специальной настройки. Смотрите поддержку платформы обзор.
addEventListener
Добавляет прослушиватель для события от
InAppBrowser.
ref.addEventListener(eventname, callback);
ссылка: ссылка для
InAppBrowserокно (InAppBrowser)-
EventName: событие для прослушивания (String)
-
loadstart: событие возникает, когда
InAppBrowserначинает для загрузки URL-адреса. -
loadstop: событие возникает, когда
InAppBrowserзавершит загрузку URL-адреса. -
loaderror: событие возникает, когда
InAppBrowserобнаруживает ошибку при загрузке URL-адреса. -
выход: возникает событие, когда
InAppBrowserокно закрыто.
-
loadstart: событие возникает, когда
обратного вызова: функция, которая выполняется, когда возникает событие. Функция передается
InAppBrowserEventобъект в качестве параметра.
Поддерживаемые платформы
- Андроид
- Ежевика
- iOS
- Windows Phone 7 и 8
Быстрый пример
var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function() { alert(event.url); });
Полный пример
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser.addEventListener Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
ref.addEventListener('exit', function(event) { alert(event.type); });
}
</script>
</head>
<body>
</body>
</html>
метод removeEventListener
Удаляет прослушиватель для события от
InAppBrowser.
ref.removeEventListener(eventname, callback);
ссылка: ссылка для
InAppBrowserокно. (InAppBrowser)-
EventName: событие прекратить прослушивание. (Строка)
-
loadstart: событие возникает, когда
InAppBrowserначинает для загрузки URL-адреса. -
loadstop: событие возникает, когда
InAppBrowserзавершит загрузку URL-адреса. -
loaderror: событие возникает, когда
InAppBrowserобнаруживает ошибку загрузки URL-адреса. -
выход: возникает событие, когда
InAppBrowserокно закрыто.
-
loadstart: событие возникает, когда
обратного вызова: функция, выполняемая когда это событие наступает. Функция передается
InAppBrowserEventобъект.
Поддерживаемые платформы
- Андроид
- Ежевика
- iOS
- Windows Phone 7 и 8
Быстрый пример
var ref = window.open('http://apache.org', '_blank', 'location=yes');
var myCallback = function() { alert(event.url); }
ref.addEventListener('loadstart', myCallback);
ref.removeEventListener('loadstart', myCallback);
Полный пример
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser.removeEventListener Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Global InAppBrowser reference
var iabRef = null;
function iabLoadStart(event) {
alert(event.type + ' - ' + event.url);
}
function iabLoadStop(event) {
alert(event.type + ' - ' + event.url);
}
function iabLoadError(event) {
alert(event.type + ' - ' + event.message);
}
function iabClose(event) {
alert(event.type);
iabRef.removeEventListener('loadstart', iabLoadStart);
iabRef.removeEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('loaderror', iabLoadError);
iabRef.removeEventListener('exit', iabClose);
}
// device APIs are available
//
function onDeviceReady() {
iabRef = window.open('http://apache.org', '_blank', 'location=yes');
iabRef.addEventListener('loadstart', iabLoadStart);
iabRef.addEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('loaderror', iabLoadError);
iabRef.addEventListener('exit', iabClose);
}
</script>
</head>
<body>
</body>
</html>
закрыть
Закрывает
InAppBrowserокно.
ref.close();
-
ссылка: ссылка для
InAppBrowserокно (InAppBrowser)
Поддерживаемые платформы
- Андроид
- Ежевика
- iOS
- Windows Phone 7 и 8
Быстрый пример
var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.close();
Полный пример
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser.close Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
var ref = window.open('http://apache.org', '_blank', 'location=yes');
// close InAppBrowser after 5 seconds
setTimeout(function() {
ref.close();
}, 5000);
}
</script>
</head>
<body>
</body>
</html>
Показать
Отображается окно InAppBrowser, был открыт скрытые. Вызов это не имеет эффекта при InAppBrowser уже был виден.
ref.show();
-
ref: ссылка на окно (InAppBrowser
InAppBrowser)
Поддерживаемые платформы
- Андроид
- Ежевика
- iOS
Быстрый пример
var ref = window.open('http://apache.org', '_blank', 'hidden=yes');
ref.show();
Полный пример
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser.show Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
var ref = window.open('http://apache.org', '_blank', 'hidden=yes');
ref.addEventListener('loadstop', function(event) {
alert('background window loaded');
});
// close InAppBrowser after 5 seconds
setTimeout(function() {
ref.close();
}, 5000);
}
</script>
</head>
<body>
</body>
</html>
executeScript
Вставляет код JavaScript в
InAppBrowserокно
ref.executeScript(details, callback);
ссылка: ссылка для
InAppBrowserокно. (InAppBrowser)-
injectDetails: подробности сценария для запуска, указав либо
fileилиcodeключ. (Объект)- файл: URL-адрес сценария вставки.
- код: текст сценария для вставки.
-
обратного вызова: функция, которая выполняет после вводят JavaScript-код.
- Если введенный скрипт имеет тип
code, обратный вызов выполняется с одним параметром, который является возвращаемое значение сценария, завернутые вArray. Для многострочных сценариев это возвращаемое значение последнего оператора, или последнее вычисленное выражение.
- Если введенный скрипт имеет тип
Поддерживаемые платформы
- Андроид
- Ежевика
- iOS
Быстрый пример
var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
ref.executeSript({file: "myscript.js"});
});
Полный пример
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser.executeScript Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Global InAppBrowser reference
var iabRef = null;
// Inject our custom JavaScript into the InAppBrowser window
//
function replaceHeaderImage() {
iabRef.executeScript({
code: "var img=document.querySelector('#header img'); img.src='http://cordova.apache.org/images/cordova_bot.png';"
}, function() {
alert("Image Element Successfully Hijacked");
}
}
function iabClose(event) {
iabRef.removeEventListener('loadstop', replaceHeaderImage);
iabRef.removeEventListener('exit', iabClose);
}
// device APIs are available
//
function onDeviceReady() {
iabRef = window.open('http://apache.org', '_blank', 'location=yes');
iabRef.addEventListener('loadstop', replaceHeaderImage);
iabRef.addEventListener('exit', iabClose);
}
</script>
</head>
<body>
</body>
</html>
insertCSS
Внедряет CSS в
InAppBrowserокно.
ref.insertCSS(details, callback);
ссылка: ссылка для
InAppBrowserокно (InAppBrowser)-
injectDetails: подробности сценария для запуска, указав либо
fileилиcodeключ. (Объект)- файл: URL-адрес таблицы стилей для вставки.
- код: текст таблицы стилей для вставки.
обратного вызова: функция, которая выполняет после вводят CSS.
Поддерживаемые платформы
- Андроид
- Ежевика
- iOS
Быстрый пример
var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
ref.insertCSS({file: "mystyles.css"});
});
Полный пример
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser.insertCSS Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Global InAppBrowser reference
var iabRef = null;
// Inject our custom CSS into the InAppBrowser window
//
function changeBackgroundColor() {
iabRef.insertCSS({
code: "body { background: #ffff00"
}, function() {
alert("Styles Altered");
}
}
function iabClose(event) {
iabRef.removeEventListener('loadstop', changeBackgroundColor);
iabRef.removeEventListener('exit', iabClose);
}
// device APIs are available
//
function onDeviceReady() {
iabRef = window.open('http://apache.org', '_blank', 'location=yes');
iabRef.addEventListener('loadstop', changeBackgroundColor);
iabRef.addEventListener('exit', iabClose);
}
</script>
</head>
<body>
</body>
</html>
InAppBrowserEvent
Объект, который передается функции обратного вызова из addEventListener слово InAppBrowser объект.
Свойства
тип: eventname, либо
loadstart,loadstop,loaderror, илиexit. (Строка)URL: URL-адрес, который был загружен. (Строка)
код: код ошибки, только в случае
loaderror. (Число)сообщение: сообщение об ошибке, только в случае
loaderror. (Строка)
window.open
Открывает URL-адрес в новой InAppBrowser например, текущий экземпляр браузера или браузера системы.
var ref = window.open(url, target, options);
ссылка: ссылка для
InAppBrowserокно. (InAppBrowser)URL: URL-адрес для загрузки (String). Вызвать
encodeURI()на это, если URL-адрес содержит символы Unicode.-
Цель: цель для загрузки URL-адреса, необязательный параметр, по умолчанию
_self. (Строка)-
_self: Открывается в Cordova WebView, если URL-адрес в белый список, в противном случае он открывается вInAppBrowser. -
_blank: Открывает вInAppBrowser. -
_system: Открывается в веб-браузера системы.
-
-
опции: параметры для
InAppBrowser. Необязательный параметр, виновная в:location=yes. (Строка)optionsСтрока не должна содержать каких-либо пустое пространство, и каждая функция пар имя/значение должны быть разделены запятой. Функция имена нечувствительны к регистру. Все платформы поддерживают исходное значение:-
Расположение: равным
yesилиnoпревратитьInAppBrowserв адресную строку или выключить.Андроид только
closebuttoncaption - задать строку, которая будет заголовок для кнопки "Готово".
- скрытые - присвоено значение 'yes', чтобы создать браузера и загрузки страницы, но не показать его. Событие load будет срабатывать, когда загрузка завершена. Опустить или значение «нет» (по умолчанию) иметь браузера открыть и загрузить нормально.
- clearcache - присвоено значение 'yes', чтобы иметь кэш браузера cookie очищается перед открытием нового окна
-
clearsessioncache - значение 'yes', чтобы сессии куки кэш очищается перед открытием нового окна
iOS только
closebuttoncaption - задать строку, которая будет заголовок для кнопки "Готово". Обратите внимание, что вам будет необходимо локализовать это значение самостоятельно.
- скрытые - присвоено значение 'yes', чтобы создать браузера и загрузки страницы, но не показать его. Событие load будет срабатывать, когда загрузка завершена. Опустить или значение «нет» (по умолчанию) иметь браузера открыть и загрузить нормально.
- панель инструментов - набор «да» или «нет», чтобы включение и отключение панели инструментов для InAppBrowser (по умолчанию 'Да')
-
enableViewportScale: значение
yesилиnoдля предотвращения видового экрана, масштабирование через тег meta (по умолчаниюno). -
mediaPlaybackRequiresUserAction: значение
yesилиnoдля предотвращения HTML5 аудио или видео от Автовоспроизведение (по умолчаниюno). -
allowInlineMediaPlayback: значение
yesилиnoчтобы разрешить воспроизведение мультимедиа Встроенный HTML5, отображение в окне браузера, а не конкретного устройства воспроизведения интерфейса. HTMLvideoэлемент должен также включатьwebkit-playsinlineатрибут (по умолчаниюno) -
keyboardDisplayRequiresUserAction: значение
yesилиnoчтобы открыть клавиатуру, когда формы элементы получают фокус через JavaScript вfocus()вызов (по умолчаниюyes). -
suppressesIncrementalRendering: значение
yesилиnoждать, пока все новое представление содержание полученных до визуализируемого (по умолчаниюno). -
presentationstyle: набор
pagesheet,formsheetилиfullscreenчтобы задать стиль презентации (по умолчаниюfullscreen). -
transitionstyle: набор
fliphorizontal,crossdissolveилиcoververticalчтобы задать стиль перехода (по умолчаниюcoververtical).
-
Поддерживаемые платформы
- Андроид
- Ежевика
- iOS
- Windows Phone 7 и 8
Быстрый пример
var ref = window.open('http://apache.org', '_blank', 'location=yes');
var ref2 = window.open(encodeURI('http://ja.m.wikipedia.org/wiki/ハングル'), '_blank', 'location=yes');
Полный пример
<!DOCTYPE html>
<html>
<head>
<title>window.open Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
// external url
var ref = window.open(encodeURI('http://apache.org'), '_blank', 'location=yes');
// relative document
ref = window.open('next.html', '_self');
}
</script>
</head>
<body>
</body>
</html>