ObjectWebView

browser window object

WebView is a window component embedded in the browser. Currently it only supports windows and macOS (10.10+). It uses IE/Edge kernel in windows and WKWebView in macOS.

Since the JavaScript program in WebView and fibjs are not in the same engine, if you need to communicate with the host program, you need to do so through messages.

The object used for communication by WebView is external. External supports one method postMessage and two events onmessage and onclose.

A simple communication example code is as follows:

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();

The content of index.html is as follows:

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

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

Before the user window is closed, the external.onclose event will be triggered, and external.onclose can decide whether to close it. If external.onclose returns false, the operation is canceled, otherwise the window will be closed.

The following example will wait 5 seconds after the user clicks Close before closing the window.

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>

In the above code, because window.close itself will also trigger the onclose event, a switch variable needs to be added to identify whether this event needs to be processed.

inheritance relationship

static properties

defaultMaxListeners

Integer, the default global maximum number of listeners

1
static Integer WebView.defaultMaxListeners;

member properties

onopen

Function, query and binding loading success event, equivalent to on("open", func);

1
Function WebView.onopen;

onload

Function, query and bind loading success events, equivalent to on("load", func);

1
Function WebView.onload;

onaddress

Function, query and bind page address change events, equivalent to on("address", func);

1
Function WebView.onaddress;

ontitle

Function, query and bind page title change events, equivalent to on("title", func);

1
Function WebView.ontitle;

onmove

Function, query and bind window movement events, equivalent to on("move", func);

1
Function WebView.onmove;

The following example outputs the coordinates of the upper-left corner of the window as it moves:

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, queries and binds window size change events, equivalent to on("size", func);

1
Function WebView.onresize;

The following example outputs the dimensions of a window when it is resized:

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, query and bind the window closing event. This time will be triggered after the WebView is closed, which is equivalent to on("closed", func);

1
Function WebView.onclosed;

onmessage

Function, query and binding accept postMessage message events in webview, equivalent to on("message", func);

1
Function WebView.onmessage;

ondownload

Function, query and binding accept download transaction status change events in webview, equivalent to on("download", func);

1
Function WebView.ondownload;

member function

loadUrl

load specifiedurlthe page

1
WebView.loadUrl(String url) async;

Call parameters:

url: String, specifiedurl

getUrl

Query the current pageurl

1
String WebView.getUrl() async;

Return results:

String, returns the current pageurl

setHtml

Set the page html of webview

1
WebView.setHtml(String html) async;

Call parameters:

html: String, set html

reload

Refresh current page

1
WebView.reload() async;

goBack

Return to previous page

1
WebView.goBack() async;

goForward

Go to next page

1
WebView.goForward() async;

print

Print the current window document

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

Call parameters:

mode: Integer, printing parameters, 0: fast printing; 1: standard printing; 2: print preview. Default is 1

executeJavaScript

Run a piece of JavaScript code in the current window

1
WebView.executeJavaScript(String code) async;

Call parameters:

code: String, specifies the JavaScript code to be executed

close

Close current window

1
WebView.close() async;

postMessage

Send message to webview

1
WebView.postMessage(String msg) async;

Call parameters:

msg: String, the message to be sent

postMessage needs to send the message after the window is loaded, and the messages sent before will be lost. Therefore, it is recommended to call this method after the onload event is triggered.

on

Bind an event handler to the object

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

Call parameters:

ev: String, specifies the name of the event
func: Function, specify the event processing function

Return results:

Object, returns the event object itself to facilitate chain calls

Bind an event handler to the object

1
Object WebView.on(Object map);

Call parameters:

map: Object, specifies the event mapping relationship, the object attribute name will be used as the event name, and the value of the attribute will be used as the event processing function

Return results:

Object, returns the event object itself to facilitate chain calls

addListener

Bind an event handler to the object

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

Call parameters:

ev: String, specifies the name of the event
func: Function, specify the event processing function

Return results:

Object, returns the event object itself to facilitate chain calls

Bind an event handler to the object

1
Object WebView.addListener(Object map);

Call parameters:

map: Object, specifies the event mapping relationship, the object attribute name will be used as the event name, and the value of the attribute will be used as the event processing function

Return results:

Object, returns the event object itself to facilitate chain calls

prependListener

Bind an event handler to the object's origin

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

Call parameters:

ev: String, specifies the name of the event
func: Function, specify the event processing function

Return results:

Object, returns the event object itself to facilitate chain calls

Bind an event handler to the object's origin

1
Object WebView.prependListener(Object map);

Call parameters:

map: Object, specifies the event mapping relationship, the object attribute name will be used as the event name, and the value of the attribute will be used as the event processing function

Return results:

Object, returns the event object itself to facilitate chain calls

once

Bind a one-time event handler to the object. The one-time handler will only be triggered once.

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

Call parameters:

ev: String, specifies the name of the event
func: Function, specify the event processing function

Return results:

Object, returns the event object itself to facilitate chain calls

Bind a one-time event handler to the object. The one-time handler will only be triggered once.

1
Object WebView.once(Object map);

Call parameters:

map: Object, specifies the event mapping relationship, the object attribute name will be used as the event name, and the value of the attribute will be used as the event processing function

Return results:

Object, returns the event object itself to facilitate chain calls

prependOnceListener

Bind an event handler to the object's origin

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

Call parameters:

ev: String, specifies the name of the event
func: Function, specify the event processing function

Return results:

Object, returns the event object itself to facilitate chain calls

Bind an event handler to the object's origin

1
Object WebView.prependOnceListener(Object map);

Call parameters:

map: Object, specifies the event mapping relationship, the object attribute name will be used as the event name, and the value of the attribute will be used as the event processing function

Return results:

Object, returns the event object itself to facilitate chain calls

off

Unassign a function from the object processing queue

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

Call parameters:

ev: String, specifies the name of the event
func: Function, specify the event processing function

Return results:

Object, returns the event object itself to facilitate chain calls

Cancel all functions in the object processing queue

1
Object WebView.off(String ev);

Call parameters:

ev: String, specifies the name of the event

Return results:

Object, returns the event object itself to facilitate chain calls

Unassign a function from the object processing queue

1
Object WebView.off(Object map);

Call parameters:

map: Object, specifies the event mapping relationship, the object attribute name is used as the event name, and the value of the attribute is used as the event processing function

Return results:

Object, returns the event object itself to facilitate chain calls

removeListener

Unassign a function from the object processing queue

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

Call parameters:

ev: String, specifies the name of the event
func: Function, specify the event processing function

Return results:

Object, returns the event object itself to facilitate chain calls

Cancel all functions in the object processing queue

1
Object WebView.removeListener(String ev);

Call parameters:

ev: String, specifies the name of the event

Return results:

Object, returns the event object itself to facilitate chain calls

Unassign a function from the object processing queue

1
Object WebView.removeListener(Object map);

Call parameters:

map: Object, specifies the event mapping relationship, the object attribute name is used as the event name, and the value of the attribute is used as the event processing function

Return results:

Object, returns the event object itself to facilitate chain calls

removeAllListeners

Cancels all listeners for all events from the object's processing queue. If an event is specified, removes all listeners for the specified event.

1
Object WebView.removeAllListeners(String ev);

Call parameters:

ev: String, specifies the name of the event

Return results:

Object, returns the event object itself to facilitate chain calls

Cancels all listeners for all events from the object's processing queue. If an event is specified, removes all listeners for the specified event.

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

Call parameters:

evs: Array, specify the name of the event

Return results:

Object, returns the event object itself to facilitate chain calls

setMaxListeners

The default limit on the number of listeners, for compatibility only

1WebView.setMaxListeners(Integer n);

Call parameters:

n: Integer, specify the number of events

getMaxListeners

Gets the default limit number of listeners, for compatibility only

1Integer WebView.getMaxListeners();

Return results:

Integer, returns the default limit quantity

listeners

Query the listener array for the specified event of the object

1
Array WebView.listeners(String ev);

Call parameters:

ev: String, specifies the name of the event

Return results:

Array, returns the listener array for the specified event

listenerCount

Query the number of listeners for the specified event of the object

1
Integer WebView.listenerCount(String ev);

Call parameters:

ev: String, specifies the name of the event

Return results:

Integer, returns the number of listeners for the specified event

Query the number of listeners for the specified event of the object

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

Call parameters:

o: Value, specifies the object of the query
ev: String, specifies the name of the event

Return results:

Integer, returns the number of listeners for the specified event

eventNames

Query listener event name

1
Array WebView.eventNames();

Return results:

Array, returns an array of event names

emit

Actively trigger an event

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

Call parameters:

ev: String, event name
args: ..., event parameters will be passed to the event processing function

Return results:

Boolean, returns the event trigger status, returns true if there is a response event, otherwise returns false

toString

Returns the string representation of the object. Generally, "[Native Object]" is returned. The object can be re-implemented according to its own characteristics.

1
String WebView.toString();

Return results:

String, returns the string representation of the object

toJSON

Returns a JSON format representation of the object, generally returning a collection of readable properties defined by the object.

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

Call parameters:

key: String, not used

Return results:

Value, returns a value containing JSON serializable

Development Guide

Basic module

built-in objects

community module

ObjectWebView

inheritance relationship

static properties

defaultMaxListeners

member properties

onopen

onload

onaddress

ontitle

onmove

onresize

onclosed

onmessage

ondownload

member function

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