개체 WebView

브라우저 창 개체

WebView는 브라우저에 내장 된 창 구성 요소로 현재 Windows, macOS (10.10+) 만 지원합니다. Windows에서는 IE / Edge 커널을 사용하고 macOS에서는 WKWebView를 사용합니다.

WebView와 fibjs의 JavaScript 프로그램은 동일한 엔진에 있지 않기 때문에 호스트 프로그램과 통신해야하는 경우 메시지를 사용해야합니다.

WebView에서 통신을 위해 사용하는 개체는 하나의 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

정수, 기본 전역 최대 리스너 수

1
static Integer WebView.defaultMaxListeners;

회원 속성

type

String, 현재 창의 WebView 엔진

1
readonly String WebView.type;

dev

값, DevTools 액세스 객체, 호출 인터페이스 참조 : https://chromedevtools.github.io/devtools-protocol/

1readonly Value WebView.dev;

onopen

함수, 쿼리 및 바인딩로드 성공 이벤트, on ( "open", func);

1
Function WebView.onopen;

onload

함수, 쿼리 및 바인딩로드 성공 이벤트, on ( "load", func);

1
Function WebView.onload;

onaddress

on ( "address", func); 페이지 주소 변경 이벤트를 함수, 쿼리 및 바인딩합니다.

1
Function WebView.onaddress;

ontitle

on ( "title", func); 페이지 제목 변경 이벤트를 함수, 쿼리 및 바인딩합니다.

1
Function WebView.ontitle;

onmove

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

함수, 쿼리 및 바인딩 창 크기 변경 이벤트, 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

함수, 쿼리 및 바인드 창 닫기 이벤트, 이번에는 WebView가 닫힌 후 트리거됩니다. 이는 on ( "closed", func);

1
Function WebView.onclosed;

onmessage

on ( "message", func); webview에서 postMessage 이벤트를 받아들이 기위한 함수, 쿼리 및 바인드;

1
Function WebView.onmessage;

회원 기능

loadUrl

지정된 부하 url 페이지

1
WebView.loadUrl(String url) async;

호출 매개 변수 :

url: 문자열, 지정됨 url

getUrl

현재 페이지 쿼리 url

1
String WebView.getUrl() async;

반환 결과 :

String, 현재 페이지로 돌아 가기 url

setHtml

WebView의 페이지 HTML 설정

1
WebView.setHtml(String html) async;

호출 매개 변수 :

html: 문자열, 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: 정수, 인쇄 매개 변수, 0 : 고속 인쇄, 1 : 표준 인쇄, 2 : 인쇄 미리보기. 기본값은 1입니다.

printToPDF

현재 창 문서를 PDF 파일로 인쇄

1
WebView.printToPDF(String file) async;

호출 매개 변수 :

file: 문자열, pdf 경로 지정

executeJavaScript

현재 창에서 JavaScript 코드를 실행합니다.

1
WebView.executeJavaScript(String code) async;

호출 매개 변수 :

code: 문자열, 실행할 JavaScript 코드 지정

executeDevToolsMethod

현재 창에서 DevTools 명령을 실행하고 결과를 반환합니다.

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

호출 매개 변수 :

method: 문자열, 실행할 DevTools 명령을 지정합니다.
params: 개체, 명령 매개 변수 지정

반환 결과 :

Variant, 실행 결과 반환

close

현재 창 닫기

1
WebView.close() async;

postMessage

웹보기에 메시지 보내기

1
WebView.postMessage(String msg) async;

호출 매개 변수 :

msg : String, 보낼 메시지

postMessage는 창이로드 된 후 메시지를 보내야하며 그 전에 보낸 메시지는 손실됩니다. 따라서 onload 이벤트가 트리거 된 후에이 메서드를 호출하는 것이 좋습니다.

on

이벤트 핸들러를 객체에 바인딩

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

호출 매개 변수 :

ev: 문자열, 이벤트 이름 지정
func: 기능, 이벤트 처리 기능 지정

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

이벤트 핸들러를 객체에 바인딩

1
Object WebView.on(Object map);

호출 매개 변수 :

map: 개체, 이벤트 매핑 관계 지정, 개체 속성 이름은 이벤트 이름으로 사용되며 속성 값은 이벤트 처리 기능으로 사용됩니다.

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

addListener

이벤트 핸들러를 객체에 바인딩

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

호출 매개 변수 :

ev: 문자열, 이벤트 이름 지정
func: 기능, 이벤트 처리 기능 지정

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

이벤트 핸들러를 객체에 바인딩

1
Object WebView.addListener(Object map);

호출 매개 변수 :

map: 개체, 이벤트 매핑 관계 지정, 개체 속성 이름은 이벤트 이름으로 사용되며 속성 값은 이벤트 처리 기능으로 사용됩니다.

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

prependListener

이벤트 핸들러를 객체의 시작에 바인딩

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

호출 매개 변수 :

ev: 문자열, 이벤트 이름 지정
func: 기능, 이벤트 처리 기능 지정

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

이벤트 핸들러를 객체의 시작에 바인딩

1
Object WebView.prependListener(Object map);

호출 매개 변수 :

map: 개체, 이벤트 매핑 관계 지정, 개체 속성 이름은 이벤트 이름으로 사용되며 속성 값은 이벤트 처리 기능으로 사용됩니다.

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

once

일회성 이벤트 처리 기능을 객체에 바인딩하면 일회성 처리 기능이 한 번만 트리거됩니다.

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

호출 매개 변수 :

ev: 문자열, 이벤트 이름 지정
func: 기능, 이벤트 처리 기능 지정

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

일회성 이벤트 처리 기능을 객체에 바인딩하면 일회성 처리 기능이 한 번만 트리거됩니다.

1
Object WebView.once(Object map);

호출 매개 변수 :

map: 개체, 이벤트 매핑 관계 지정, 개체 속성 이름은 이벤트 이름으로 사용되며 속성 값은 이벤트 처리 기능으로 사용됩니다.

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

prependOnceListener

이벤트 핸들러를 객체의 시작에 바인딩

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

호출 매개 변수 :

ev: 문자열, 이벤트 이름 지정
func: 기능, 이벤트 처리 기능 지정

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

이벤트 핸들러를 객체의 시작에 바인딩

1
Object WebView.prependOnceListener(Object map);

호출 매개 변수 :

map: 개체, 이벤트 매핑 관계 지정, 개체 속성 이름은 이벤트 이름으로 사용되며 속성 값은 이벤트 처리 기능으로 사용됩니다.

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

off

개체 처리 대기열에서 지정된 기능을 취소합니다.

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

호출 매개 변수 :

ev: 문자열, 이벤트 이름 지정
func: 기능, 이벤트 처리 기능 지정

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

개체 처리 대기열의 모든 기능 취소

1
Object WebView.off(String ev);

호출 매개 변수 :

ev: 문자열, 이벤트 이름 지정

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

개체 처리 대기열에서 지정된 기능을 취소합니다.

1
Object WebView.off(Object map);

호출 매개 변수 :

map: 개체, 이벤트 매핑 관계 지정, 개체 속성 이름을 이벤트 이름으로 사용하고 속성 값을 이벤트 처리 기능으로 사용

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

removeListener

개체 처리 대기열에서 지정된 기능을 취소합니다.

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

호출 매개 변수 :

ev: 문자열, 이벤트 이름 지정
func: 기능, 이벤트 처리 기능 지정

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

개체 처리 대기열의 모든 기능 취소

1
Object WebView.removeListener(String ev);

호출 매개 변수 :

ev: 문자열, 이벤트 이름 지정

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

개체 처리 대기열에서 지정된 기능을 취소합니다.

1
Object WebView.removeListener(Object map);

호출 매개 변수 :

map: 개체, 이벤트 매핑 관계 지정, 개체 속성 이름을 이벤트 이름으로 사용하고 속성 값을 이벤트 처리 기능으로 사용

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

removeAllListeners

객체 처리 대기열에서 모든 이벤트의 모든 리스너를 취소합니다. 이벤트가 지정된 경우 지정된 이벤트의 모든 리스너를 제거합니다.

1
Object WebView.removeAllListeners(String ev);

호출 매개 변수 :

ev: 문자열, 이벤트 이름 지정

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

객체 처리 대기열에서 모든 이벤트의 모든 리스너를 취소합니다. 이벤트가 지정된 경우 지정된 이벤트의 모든 리스너를 제거합니다.

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

호출 매개 변수 :

evs: 배열, 이벤트 이름 지정

반환 결과 :

Object, 체인 호출에 편리한 이벤트 객체 자체를 반환합니다.

setMaxListeners

호환성을 위해서만 리스너 수의 기본 제한

1WebView.setMaxListeners(Integer n);

호출 매개 변수 :

n: 정수, 이벤트 수 지정

getMaxListeners

호환성을 위해서만 리스너 수의 기본 제한을 가져옵니다.

1Integer WebView.getMaxListeners();

반환 결과 :

Integer, 기본 제한 수로 돌아 가기

listeners

쿼리 객체의 지정된 이벤트에 대한 리스너 배열

1
Array WebView.listeners(String ev);

호출 매개 변수 :

ev: 문자열, 이벤트 이름 지정

반환 결과 :

Array, 지정된 이벤트에 대한 리스너 배열을 반환합니다.

listenerCount

쿼리 개체의 지정된 이벤트에 대한 리스너 수

1
Integer WebView.listenerCount(String ev);

호출 매개 변수 :

ev: 문자열, 이벤트 이름 지정

반환 결과 :

Integer, 지정된 이벤트에 대한 리스너 수를 반환합니다.

eventNames

리스너의 이벤트 이름 쿼리

1
Array WebView.eventNames();

반환 결과 :

Array, 이벤트 이름의 배열을 반환합니다.

emit

이벤트를 적극적으로 트리거

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

호출 매개 변수 :

ev: 문자열, 이벤트 이름
args: ..., 이벤트 핸들러에 전달되는 이벤트 매개 변수

반환 결과 :

Boolean, 이벤트 트리거 상태로 돌아가고, 응답 이벤트가 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

toString

객체의 문자열 표현을 반환합니다. 일반적으로 "[Native Object]"를 반환합니다. 객체는 자체 특성에 따라 다시 구현 될 수 있습니다.

1
String WebView.toString();

반환 결과 :

String, 객체의 문자열 표현을 반환합니다.

toJSON

객체의 JSON 형식 표현을 반환하고 일반적으로 객체가 정의한 읽을 수있는 속성 모음을 반환합니다.

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

호출 매개 변수 :

key: 문자열, 미사용

반환 결과 :

Value, 직렬화 가능한 JSON이 포함 된 값을 반환합니다.

개발 가이드

기본 모듈

내장 개체

커뮤니티 모듈

개체 WebView

계승

정적 속성

defaultMaxListeners

회원 속성

type

dev

onopen

onload

onaddress

ontitle

onmove

onresize

onclosed

onmessage

회원 기능

loadUrl

getUrl

setHtml

reload

goBack

goForward

print

printToPDF

executeJavaScript

executeDevToolsMethod

close

postMessage

on

addListener

prependListener

once

prependOnceListener

off

removeListener

removeAllListeners

setMaxListeners

getMaxListeners

listeners

listenerCount

eventNames

emit

toString

toJSON