개체 WebView

브라우저 창 개체

WebView는 브라우저에 내장된 윈도우 컴포넌트로, 현재 macOS(10.10+) 윈도우만 지원합니다. 윈도우에서는 IE/Edge 커널을 사용하고, macOS에서는 WKWebView를 사용하세요.

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

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 이벤트를 트리거하기 때문에 이벤트 처리가 필요한지 여부를 식별하기 위해 switch 변수를 추가해야 합니다.

계승

정적 속성

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;

ondownload

on("download", func)에 해당하는 webview에서 다운로드 트랜잭션 상태 변경 이벤트를 수락하기 위한 함수, 쿼리 및 바인딩;

1
Function WebView.ondownload;

멤버 함수

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: 문자열, 보낼 메시지

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, 지정된 이벤트에 대한 리스너 수를 반환합니다.

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

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

호출 매개변수:

o: 값, 쿼리의 개체를 지정합니다.
ev: 문자열, 이벤트 이름 지정

반환 결과:

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

eventNames

리스너의 이벤트 이름 쿼리

1
Array WebView.eventNames();

반환 결과:

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

emit

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

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

호출 매개변수:

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

반환 결과:

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

toString

개체의 문자열 표현을 반환하고 일반적으로 "[네이티브 개체]"를 반환하며 개체는 고유한 특성에 따라 다시 구현할 수 있습니다.

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

ondownload

멤버 함수

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