使用window.open()方法可以让用户在应用程序内显示一个浏览器窗口，但是PhoneGap重写了这个方法。该方法与BOM（浏览器对象模型）的window.open()方法有很大的不同，其中一个最大的不同是该方法返回了一个InAppBrowser对象，用于引用这个新打开的窗口，从而可以在应用程序内控制这个窗口。

1
var ref = window.open('http://zwlme.com', '_blank', 'location=yes');

这个新打开的窗口是一个InAppBrowser实例，一般称之为InAppBrowser窗口。

InAppBrowser浏览器插件的完全限定名是org.apache.cordova.inappbrowser，可以使用下列命令安装插件

1
cordova plugin add org.apache.cordova.inappbrowser

打开一个新的窗口

当然，使用window.open()方法不当会在一个新的InAppBrowser实例中打开一个URL，也可以在当前浏览器或者在系统浏览器中打开一个URL。

该方法的语法格式如下。

1
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=yes

    • location: 用来设置InAppBrowser窗口是否出现地址栏。可选值为yes和no。

    Android还可以设置下列功能项：

  • closebuttoncaption: 用来设置Done按钮显示的文字。

  • hidden: 如果设置yes，则会先加载网页但是不显示出来。然后可以调用show()方法来显示该网页。虽然加载是不显示的，但加载完成后会触发加载完成事件。默认值为no，表示正常加载和显示。

  • clearcache: 如果设为yes，表示将会首先清除Cookies，然后加载网页。默认值为no。

  • clearsessioncache: 如果设为yes，表示将会首先清除Session，然后加载网页。默认值为no。

举个栗子：

1
2
3
4
5
6
// 使用绝对路径
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()方法来关闭这个窗口。

1
ref.close()

例如下列代码，可以实现窗口在打开5秒后关闭：

1
2
3
4
5
6
7
8
function onDeviceReady(){
 // 打开一个窗口
 var ref = window.open('http://zwlme.com', '_blank', 'location=yes');
 // 打开5秒后关闭
 setTimeout(function(){
  ref.close();
 },5000);
}

显示隐藏的网页

打开网页时功能项hidden被设置为yes，则会先加载网页但是不显示出来。要想随后显示可以调用show()方法来实现。

1
2
3
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)

1
2
3
4
5
6
7
8
9
10
11
// 打开一个窗口
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窗口并执行，语法格式如下。

1
ref.executeScript(details, callback);

参数ref是返回的InAppBrowser实例，参数details定义要注入的JavaScript代码详细信息，该参数是一个Object，可以定义两个属性，属性要么是file，要么是code。

  • file: 指定一个JavaScript文件地址，这个文件中的代码将会注入到当前InAppBrowser窗口。
  • code: 指定一个JavaScript代码字符串，这段代码将会注入到当前InAppBrowser窗口。

参数callback定义执行注入后的回调函数。如果插入的类型是code，callback函数将会被传递进一个参数（这个参数是一个Array类型），这是代码执行的返回值。对于多行代码，仅包含最后一行代码的返回值。

这个方法一般都应该在文档加载完成后被执行，例如下列代码，当文档加载完成后把一个JavaScript文件注入到当前加载的页面：

1
2
3
4
var ref = window.open('http://zwlme.com', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
    ref.executeScript({file: "myscript.js"});
});

CSS样式注入

insertCSS()方法可以将一个CSS样式注入InAppBrowser窗口，语法格式如下。

1
ref.insertCSS(details, callback);

参数ref是返回的InAppBrowser实例，参数details定义要注入的CSS样式代码详细信息，该参数是一个Object，可以定义两个属性，属性要么是file，要么是code。

  • file: 指定一个CSS样式文件地址，这个文件中的代码将会注入到当前InAppBrowser窗口。
  • code: 指定一个CSS样式代码字符串，这段代码将会注入到当前InAppBrowser窗口。

参数callback定义执行注入后的回调函数。

这个方法一般都应该在文档加载完成后被执行，例如下列代码，当文档加载完成后把一个CSS样式文件注入到当前加载的页面：

1
2
3
4
var ref = window.open('http://zwlme.com', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
    ref.insertCSS({file: "mystyles.css"});
});

相关文章:

PhoneGap入门教程(1) - 环境安装与配置

PhoneGap入门教程(2) - 内核事件和基本用法

PhoneGap入门教程(3) - 原生插件安装和管理

PhoneGap入门教程(4) - 电量变化侦测

PhoneGap入门教程(5) - 程序内置浏览器窗口

PhoneGap入门教程(6) - 设备信息和系统提示


参考资料：

Apache Cordova Documentation - InAppBrowser

[img1]: /img/post/PhoneGap-3/1.png
[img2]: /img/post/PhoneGap-3/2.png
[img3]: /img/post/PhoneGap-3/3.png