InAppBrowser使用心得

1.安装inAppBrowser

$ cordova plugin add org.apache.cordova.inappbrowser
$ cordova plugin ls
[ 'org.apache.cordova.inappbrowser' ]
$ cordova plugin rm org.apache.cordova.inappbrowser   //移除

2.配置

Amazon Fire OS (in res/xml/config.xml)
Android (in res/xml/config.xml)
iOS (in the named application directory's config.xml)
Windows Phone 7 and 8 (in config.xml)

3.新建浏览器

  var ref = window.open(url, target, options);

options可以设置浏览器参数：

itemclosebuttoncaption：关闭按钮名称
- location：是否显示当前网页地址
- toolbar：是否显示工具栏等等还有很多

4.该对象有3个方法

addEventListener()添加监听
removeEventListener()移除监听
close()关闭浏览器

例子：

<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.addEventListener('loaderror', iabLoadError);
     iabRef.addEventListener('exit', iabClose);
}

</script>

loadstart - InAppBrowser开始加载网页时候触发
loadstop - InAppBrowser网页加载完成触发
loaderror - InAppBrowser加载网页出错的时候触发
exit - InAppBrowser窗口关闭的时候触发

5.添加JS语句

ref.executeScript(details, callback);

details可以传js文件，也可以传代码。

var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
ref.executeScript({file: "myscript.js"});
});

使用executeScript也可以实现向页面传递参数。

例子

<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>