使用window.open()方法可以让用户在应用程序内显示一个浏览器窗口，但是PhoneGap重写了这个方法。该方法与BOM（浏览器对象模型）的window.open()方法有很大的不同，其中一个最大的不同是该方法返回了一个InAppBrowser对象，用于引用这个新打开的窗口，从而可以在应用程序内控制这个窗口。
var ref = window.open('http://zwlme.com', '_blank', 'location=yes');
这个新打开的窗口是一个InAppBrowser实例，一般称之为InAppBrowser窗口。
InAppBrowser浏览器插件的完全限定名是org.apache.cordova.inappbrowser，可以使用下列命令安装插件
cordova plugin add org.apache.cordova.inappbrowser
##打开一个新的窗口
当然，使用window.open()方法不当会在一个新的InAppBrowser实例中打开一个URL，也可以在当前浏览器或者在系统浏览器中打开一个URL。
该方法的语法格式如下。
var ref = window.open(url, target, options);
- ref: 返回的
InAppBrowser实例，使用它可以进一步的操作这个窗口 - url: 指定要加载的URL地址(String)。如果URL包含Unicode字符，首先使用
encodeURI()进行编码。 -
target: 指定加载的URL到目标位置，这个参数是可选的。默认是
_self。_self: 如果URL在白名单列表中，在Cordova WebView中打开URL，负责在InAppBrowser窗口中打开。_blank: 在InAppBrowser窗口中打开_system: 在系统浏览器中打开
-
option: 参数可选。指定功能项，各功能之间使用逗号隔开，且不能包含空格。默认的值是
location=yeslocation: 用来设置InAppBrowser窗口是否出现地址栏。可选值为yes和no。
Android还可以设置下列功能项：
closebuttoncaption: 用来设置Done按钮显示的文字。hidden: 如果设置yes，则会先加载网页但是不显示出来。然后可以调用show()方法来显示该网页。虽然加载是不显示的，但加载完成后会触发加载完成事件。默认值为no，表示正常加载和显示。clearcache: 如果设为yes，表示将会首先清除Cookies，然后加载网页。默认值为no。clearsessioncache: 如果设为yes，表示将会首先清除Session，然后加载网页。默认值为no。
举个栗子：
// 使用绝对路径
var ref = window.open('http://zwlme.com', '_blank', 'location=yes');
// URL存在Unicode字符，因此应该用encodeURI()进行编码
var ref2 = window.open(encodeURI('http://www.baidu.com/s?wd=卓文理'), '_blank', 'location=yes');
// 使用相对地址
var ref = window.open('next.html', '_self');
##关闭窗口
可以使用colse()方法来关闭这个窗口。
ref.close()
例如下列代码，可以实现窗口在打开5秒后关闭：
function onDeviceReady(){
// 打开一个窗口
var ref = window.open('http://zwlme.com', '_blank', 'location=yes');
// 打开5秒后关闭
setTimeout(function(){
ref.close();
},5000);
}
##显示隐藏的网页
打开网页时功能项hidden被设置为yes，则会先加载网页但是不显示出来。要想随后显示可以调用show()方法来实现。
var ref = window.open('http://apache.org', '_blank', 'hidden=yes');
// 一段时间后...
ref.show();
##事件处理
也可以使用addEventListener()和removeEventListener()监控和管理新窗口的事件。共有如下几个事件可以监听：
- loadstart: 当
InAppBrowser窗口开始加载一个URL时触发该事件 - loadstop: 当
InAppBrowser窗口完成加载一个URL时触发该事件 - loaderror: 当
InAppBrowser窗口加载一个URL出错时触发该事件 - exit: 当
InAppBrowser窗口关闭时触发该事件
addEventListener事件处理器包含一个参数，该参数是一个InAppBrowserEvent对象，该对象有如下属性：
-
type: 事件名，可以是
loadstart,loadstop,loaderror, 或exit。 (String) -
url: 加载的URL地址。 (String)
-
code: 返回出错代码，仅适用于
loaderror事件。 (Number) -
message: 返回出错消息，进适用于
loaderror事件。 (String)
// 打开一个窗口
var ref = window.open('http://zwlme.com', '_blank', 'location=yes');
// 注册loadstart事件监听
ref.addEventListener('loadstart', function(event) { alert(event.url); });
// 注册loadstop事件监听
ref.addEventListener('loadstop', function(event) { alert(event.url); });
// 注册exit事件监听
ref.addEventListener('exit', function(event) { alert(event.type); });
##JavaScript脚本注入
executeScript()方法可以将一个JavaScript代码注入InAppBrowser窗口并执行，语法格式如下。
ref.executeScript(details, callback);
参数ref是返回的InAppBrowser实例，参数details定义要注入的JavaScript代码详细信息，该参数是一个Object，可以定义两个属性，属性要么是file，要么是code。
- file: 指定一个JavaScript文件地址，这个文件中的代码将会注入到当前
InAppBrowser窗口。 - code: 指定一个JavaScript代码字符串，这段代码将会注入到当前
InAppBrowser窗口。
参数callback定义执行注入后的回调函数。如果插入的类型是code，callback函数将会被传递进一个参数（这个参数是一个Array类型），这是代码执行的返回值。对于多行代码，仅包含最后一行代码的返回值。
这个方法一般都应该在文档加载完成后被执行，例如下列代码，当文档加载完成后把一个JavaScript文件注入到当前加载的页面：
var ref = window.open('http://zwlme.com', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
ref.executeScript({file: "myscript.js"});
});
##CSS样式注入
insertCSS()方法可以将一个CSS样式注入InAppBrowser窗口，语法格式如下。
ref.insertCSS(details, callback);
参数ref是返回的InAppBrowser实例，参数details定义要注入的CSS样式代码详细信息，该参数是一个Object，可以定义两个属性，属性要么是file，要么是code。
- file: 指定一个CSS样式文件地址，这个文件中的代码将会注入到当前
InAppBrowser窗口。 - code: 指定一个CSS样式代码字符串，这段代码将会注入到当前
InAppBrowser窗口。
参数callback定义执行注入后的回调函数。
这个方法一般都应该在文档加载完成后被执行，例如下列代码，当文档加载完成后把一个CSS样式文件注入到当前加载的页面：
var ref = window.open('http://zwlme.com', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
ref.insertCSS({file: "mystyles.css"});
});
相关文章:
PhoneGap入门教程(5) - 程序内置浏览器窗口
参考资料：