对象 WebView

浏览器窗口对象

WebView 是一个嵌入浏览器的窗口组件，目前仅支持 windows, macOS(10.10+). 在 windows 使用 IE/Edge 内核, 在 macOS 使用 WKWebView.

由于 WebView 内的 JavaScript 程序与 fibjs 并不在同一个引擎内，所以如果需要与宿主程序进行通讯，需要通过消息进行。

WebView 用于通讯的对象是 external，external 支持一个方法 postMessage 和两个事件 onmessage、onclose。

一个简单的通讯示例代码如下：

1
2
3
4
5
6
7
8
9
// index.js
var gui = require('gui');
var webview = gui.open('fs://index.html');

webview.onmessage = msg => console.log(msg);

webview.onload = evt => webview.postMessage("hello from fibjs");

webview.wait();

index.html 的内容如下：

1
2
3
4
5
6
7
8
<script>
    external.onclose = function() {
    }

    external.onmessage = function(msg){
        external.postMessage("send back: " + msg);
    };
</script>

在用户窗口关闭之前，会触发 external.onclose 事件，external.onclose 可以决定是否关闭。如果 external.onclose 返回 false，则此次操作取消，否则将关闭窗口。

以下的例子，会在用户点关闭后等待 5 秒后再关闭窗口。

1
2
3
4
5
6
7
8
9
10
11
12
<script lang="JavaScript">
    var bClose = false;
    external.onclose = function () {
        if (!bClose) {
            setTimeout(function () {
                bClose = true;
                window.close();
            }, 5000);
            return false;
        }
    }
</script>

上面的代码中，因为 window.close 本身也会触发 onclose 事件，所以需要增加一个开关变量，用于识别是否需要处理此次事件。

继承关系

静态属性

defaultMaxListeners

Integer, 默认全局最大监听器数

1
static Integer WebView.defaultMaxListeners;

成员属性

onopen

Function, 查询和绑定加载成功事件，相当于 on("open", func);

1
Function WebView.onopen;

onload

Function, 查询和绑定加载成功事件，相当于 on("load", func);

1
Function WebView.onload;

onaddress

Function, 查询和绑定页面地址变化事件，相当于 on("address", func);

1
Function WebView.onaddress;

ontitle

Function, 查询和绑定页面标题改变事件，相当于 on("title", func);

1
Function WebView.ontitle;

onmove

Function, 查询和绑定窗口移动事件，相当于 on("move", func);

1
Function WebView.onmove;

以下示例会在窗口移动时输出窗口的左上角坐标：

1
2
3
4
var gui = require('gui');
var webview = gui.open('fs://index.html');

webview.onmove = evt => console.log(evt.left, evt.top);

onresize

Function, 查询和绑定窗口尺寸改变事件，相当于 on("size", func);

1
Function WebView.onresize;

以下示例会在窗口改变大小时输出窗口的尺寸：

1
2
3
4
var gui = require('gui');
var webview = gui.open('fs://index.html');

webview.onresize = evt => console.log(evt.width, evt.height);

onclosed

Function, 查询和绑定窗口关闭事件，WebView 关闭后会触发此时间，相当于 on("closed", func);

1
Function WebView.onclosed;

onmessage

Function, 查询和绑定接受 webview 内 postMessage 消息事件，相当于 on("message", func);

1
Function WebView.onmessage;

ondownload

Function, 查询和绑定接受 webview 内下载事务状态变化事件，相当于 on("download", func);

1
Function WebView.ondownload;

成员函数

loadUrl

加载指定 url 的页面

1
WebView.loadUrl(String url) async;

调用参数:

url: String, 指定的 url

getUrl

查询当前页面的 url

1
String WebView.getUrl() async;

返回结果:

String, 返回当前页面的 url

setHtml

设置 webview 的页面 html

1
WebView.setHtml(String html) async;

调用参数:

html: String, 设置的 html

reload

刷新当前页面

1
WebView.reload() async;

goBack

退回到上一个页面

1
WebView.goBack() async;

goForward

前进到下一个页面

1
WebView.goForward() async;

print

打印当前窗口文档

1
WebView.print(Integer mode = 1) async;

调用参数:

mode: Integer, 打印参数，0: 快速打印; 1: 标准打印; 2: 打印预览。缺省为 1

executeJavaScript

在当前窗口运行一段 JavaScript 代码

1
WebView.executeJavaScript(String code) async;

调用参数:

code: String, 指定要执行的 JavaScript 代码

close

关闭当前窗口

1
WebView.close() async;

postMessage

向 webview 内发送消息

1
WebView.postMessage(String msg) async;

调用参数:

msg: String, 要发送的消息

postMessage 需要在窗口加载完成后发送消息，在此之前发送的消息会丢失。因此建议在 onload 事件触发后再调用此方法。

on

绑定一个事件处理函数到对象

1
2
Object WebView.on(String ev,
    Function func);

调用参数:

ev: String, 指定事件的名称
func: Function, 指定事件处理函数

返回结果:

Object, 返回事件对象本身，便于链式调用

绑定一个事件处理函数到对象

1
Object WebView.on(Object map);

调用参数:

map: Object, 指定事件映射关系，对象属性名称将作为事件名称，属性的值将作为事件处理函数

返回结果:

Object, 返回事件对象本身，便于链式调用

addListener

绑定一个事件处理函数到对象

1
2
Object WebView.addListener(String ev,
    Function func);

调用参数:

ev: String, 指定事件的名称
func: Function, 指定事件处理函数

返回结果:

Object, 返回事件对象本身，便于链式调用

绑定一个事件处理函数到对象

1
Object WebView.addListener(Object map);

调用参数:

map: Object, 指定事件映射关系，对象属性名称将作为事件名称，属性的值将作为事件处理函数

返回结果:

Object, 返回事件对象本身，便于链式调用

prependListener

绑定一个事件处理函数到对象起始

1
2
Object WebView.prependListener(String ev,
    Function func);

调用参数:

ev: String, 指定事件的名称
func: Function, 指定事件处理函数

返回结果:

Object, 返回事件对象本身，便于链式调用

绑定一个事件处理函数到对象起始

1
Object WebView.prependListener(Object map);

调用参数:

map: Object, 指定事件映射关系，对象属性名称将作为事件名称，属性的值将作为事件处理函数

返回结果:

Object, 返回事件对象本身，便于链式调用

once

绑定一个一次性事件处理函数到对象，一次性处理函数只会触发一次

1
2
Object WebView.once(String ev,
    Function func);

调用参数:

ev: String, 指定事件的名称
func: Function, 指定事件处理函数

返回结果:

Object, 返回事件对象本身，便于链式调用

绑定一个一次性事件处理函数到对象，一次性处理函数只会触发一次

1
Object WebView.once(Object map);

调用参数:

map: Object, 指定事件映射关系，对象属性名称将作为事件名称，属性的值将作为事件处理函数

返回结果:

Object, 返回事件对象本身，便于链式调用

prependOnceListener

绑定一个事件处理函数到对象起始

1
2
Object WebView.prependOnceListener(String ev,
    Function func);

调用参数:

ev: String, 指定事件的名称
func: Function, 指定事件处理函数

返回结果:

Object, 返回事件对象本身，便于链式调用

绑定一个事件处理函数到对象起始

1
Object WebView.prependOnceListener(Object map);

调用参数:

map: Object, 指定事件映射关系，对象属性名称将作为事件名称，属性的值将作为事件处理函数

返回结果:

Object, 返回事件对象本身，便于链式调用

off

从对象处理队列中取消指定函数

1
2
Object WebView.off(String ev,
    Function func);

调用参数:

ev: String, 指定事件的名称
func: Function, 指定事件处理函数

返回结果:

Object, 返回事件对象本身，便于链式调用

取消对象处理队列中的全部函数

1
Object WebView.off(String ev);

调用参数:

ev: String, 指定事件的名称

返回结果:

Object, 返回事件对象本身，便于链式调用

从对象处理队列中取消指定函数

1
Object WebView.off(Object map);

调用参数:

map: Object, 指定事件映射关系，对象属性名称作为事件名称，属性的值作为事件处理函数

返回结果:

Object, 返回事件对象本身，便于链式调用

removeListener

从对象处理队列中取消指定函数

1
2
Object WebView.removeListener(String ev,
    Function func);

调用参数:

ev: String, 指定事件的名称
func: Function, 指定事件处理函数

返回结果:

Object, 返回事件对象本身，便于链式调用

取消对象处理队列中的全部函数

1
Object WebView.removeListener(String ev);

调用参数:

ev: String, 指定事件的名称

返回结果:

Object, 返回事件对象本身，便于链式调用

从对象处理队列中取消指定函数

1
Object WebView.removeListener(Object map);

调用参数:

map: Object, 指定事件映射关系，对象属性名称作为事件名称，属性的值作为事件处理函数

返回结果:

Object, 返回事件对象本身，便于链式调用

removeAllListeners

从对象处理队列中取消所有事件的所有监听器，如果指定事件，则移除指定事件的所有监听器。

1
Object WebView.removeAllListeners(String ev);

调用参数:

ev: String, 指定事件的名称

返回结果:

Object, 返回事件对象本身，便于链式调用

从对象处理队列中取消所有事件的所有监听器，如果指定事件，则移除指定事件的所有监听器。

1
Object WebView.removeAllListeners(Array evs = []);

调用参数:

evs: Array, 指定事件的名称

返回结果:

Object, 返回事件对象本身，便于链式调用

setMaxListeners

监听器的默认限制的数量，仅用于兼容

1WebView.setMaxListeners(Integer n);

调用参数:

n: Integer, 指定事件的数量

getMaxListeners

获取监听器的默认限制的数量，仅用于兼容

1Integer WebView.getMaxListeners();

返回结果:

Integer, 返回默认限制数量

listeners

查询对象指定事件的监听器数组

1
Array WebView.listeners(String ev);

调用参数:

ev: String, 指定事件的名称

返回结果:

Array, 返回指定事件的监听器数组

listenerCount

查询对象指定事件的监听器数量

1
Integer WebView.listenerCount(String ev);

调用参数:

ev: String, 指定事件的名称

返回结果:

Integer, 返回指定事件的监听器数量

查询对象指定事件的监听器数量

1
2Integer WebView.listenerCount(Value o,
    String ev);

调用参数:

o: Value, 指定查询的对象
ev: String, 指定事件的名称

返回结果:

Integer, 返回指定事件的监听器数量

eventNames

查询监听器事件名称

1
Array WebView.eventNames();

返回结果:

Array, 返回事件名称数组

emit

主动触发一个事件

1
2
Boolean WebView.emit(String ev,
    ...args);

调用参数:

ev: String, 事件名称
args: ..., 事件参数，将会传递给事件处理函数

返回结果:

Boolean, 返回事件触发状态，有响应事件返回 true，否则返回 false

toString

返回对象的字符串表示，一般返回 "[Native Object]"，对象可以根据自己的特性重新实现

1
String WebView.toString();

返回结果:

String, 返回对象的字符串表示

toJSON

返回对象的 JSON 格式表示，一般返回对象定义的可读属性集合

1
Value WebView.toJSON(String key = "");

调用参数:

key: String, 未使用

返回结果:

Value, 返回包含可 JSON 序列化的值

开发指南

基础模块

内置对象

社区模块

对象 WebView

继承关系

静态属性

defaultMaxListeners

成员属性

onopen

onload

onaddress

ontitle

onmove

onresize

onclosed

onmessage

ondownload

成员函数

loadUrl

getUrl

setHtml

reload

goBack

goForward

print

executeJavaScript

close

postMessage

on

addListener

prependListener

once

prependOnceListener

off

removeListener

removeAllListeners

setMaxListeners

getMaxListeners

listeners

listenerCount

eventNames

emit

toString

toJSON