Object 內置對象

對象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 事件,所以需要增加一個開關變量,用於識別是否需要處理此次事件。

繼承關係

#lineWidth: 1.5 #font: Helvetica,sans-Serif #fontSize: 10 #leading: 1.6 #.this: fill=lightgray #.class: fill=white [<class>object|toString();toJSON()] [<class>EventEmitter|new EventEmitter()|EventEmitter|defaultMaxListeners|on();addListener();prependListener();once();prependOnceListener();off();removeListener();removeAllListeners();setMaxListeners();getMaxListeners();listeners();listenerCount();eventNames();emit()] [<this>WebView|type;dev;onopen;onload;onaddress;ontitle;onmove;onresize;onclosed;onmessage|loadUrl();getUrl();setHtml();reload();goBack();goForward();print();printToPDF();executeJavaScript();executeDevToolsMethod();close();postMessage()] [object] <:- [EventEmitter] [EventEmitter] <:- [WebView] EventEmitter new EventEmitter() EventEmitter defaultMaxListeners on() addListener() prependListener() once() prependOnceListener() off() removeListener() removeAllListeners() setMaxListeners() getMaxListeners() listeners() listenerCount() eventNames() emit() WebView type dev onopen onload onaddress ontitle onmove onresize onclosed onmessage loadUrl() getUrl() setHtml() reload() goBack() goForward() print() printToPDF() executeJavaScript() executeDevToolsMethod() close() postMessage() object toString() toJSON()

靜態屬性

defaultMaxListeners

Integer, 默認全局最大監聽器數

1
static Integer WebView.defaultMaxListeners;

成員屬性

type

String, 當前窗口的WebView 引擎

1
readonly String WebView.type;

dev

Value, DevTools訪問對象,調用接口參見:https://chromedevtools.github.io/devtools-protocol/

1
readonly Value WebView.dev;

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;

成員函數

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

printToPDF

打印當前窗口文檔到PDF 文件

1
WebView.printToPDF(String file) async;

調用參數:

  • file: String, 指定pdf 路徑

executeJavaScript

在當前窗口運行一段JavaScript 代碼

1
WebView.executeJavaScript(String code) async;

調用參數:

  • code: String, 指定要執行的JavaScript 代碼

executeDevToolsMethod

在當前窗口執行DevTools 命令,並返回結果

1 2
Variant WebView.executeDevToolsMethod(String method, Object params = {}) async;

調用參數:

  • method: String, 指定要執行的DevTools 命令
  • params: Object, 指定命令的參數

返回結果:

  • Variant, 返回執行的結果

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

監聽器的默認限制的數量,僅用於兼容

1
WebView.setMaxListeners(Integer n);

調用參數:

  • n: Integer, 指定事件的數量

getMaxListeners

獲取監聽器的默認限制的數量,僅用於兼容

1
Integer WebView.getMaxListeners();

返回結果:

  • Integer, 返回默認限制數量

listeners

查詢對象指定事件的監聽器數組

1
Array WebView.listeners(String ev);

調用參數:

  • ev: String, 指定事件的名稱

返回結果:

  • Array, 返回指定事件的監聽器數組

listenerCount

查詢對象指定事件的監聽器數量

1
Integer WebView.listenerCount(String ev);

調用參數:

  • 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 序列化的值