개체 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
정수, 기본 전역 최대 리스너 수
1static Integer WebView.defaultMaxListeners;
회원 속성
type
String, 현재 창의 WebView 엔진
1readonly String WebView.type;
dev
값, DevTools 액세스 개체, 호출 인터페이스 참조: https://chromedevtools.github.io/devtools-protocol/
1readonly Value WebView.dev;
onopen
on("open", func)에 해당하는 함수, 쿼리 및 바인딩 로드 성공 이벤트;
1Function WebView.onopen;
onload
on("load", func)에 해당하는 함수, 쿼리 및 바인딩 로드 성공 이벤트;
1Function WebView.onload;
onaddress
on("address", func)에 해당하는 페이지 주소 변경 이벤트를 함수, 쿼리 및 바인딩합니다.
1Function WebView.onaddress;
ontitle
on("title", func)에 해당하는 페이지 제목 변경 이벤트를 함수, 쿼리 및 바인딩합니다.
1Function WebView.ontitle;
onmove
on("move", func)에 해당하는 함수, 쿼리 및 바인딩 창 이동 이벤트;
1Function WebView.onmove;
다음 예제에서는 창이 이동할 때 창의 왼쪽 상단 모서리의 좌표를 출력합니다.
1
2
3
4var gui = require('gui');
var webview = gui.open('fs://index.html');
webview.onmove = evt => console.log(evt.left, evt.top);
onresize
on("size", func)에 해당하는 함수, 쿼리 및 바인딩 창 크기 변경 이벤트;
1Function WebView.onresize;
다음 예제는 창의 크기를 조정할 때 창의 크기를 출력합니다.
1
2
3
4var gui = require('gui');
var webview = gui.open('fs://index.html');
webview.onresize = evt => console.log(evt.width, evt.height);
onclosed
함수, 쿼리 및 바인딩 창 닫기 이벤트, 이번에는 WebView가 닫힌 후 트리거되며 on("closed", func)와 동일합니다.
1Function WebView.onclosed;
onmessage
on("message", func)에 해당하는 webview에서 postMessage 이벤트를 수락하기 위한 함수, 쿼리 및 바인딩;
1Function WebView.onmessage;
ondownload
on("download", func)에 해당하는 webview에서 다운로드 트랜잭션 상태 변경 이벤트를 수락하기 위한 함수, 쿼리 및 바인딩;
1Function WebView.ondownload;
멤버 함수
loadUrl
지정된 하중 url 페이지
1WebView.loadUrl(String url) async;
호출 매개변수:
- url: 문자열, 지정됨 url
getUrl
현재 페이지 쿼리 url
1String WebView.getUrl() async;
반환 결과:
- String, 현재 페이지로 돌아가기 url
setHtml
webview의 페이지 html 설정
1WebView.setHtml(String html) async;
호출 매개변수:
- html: 문자열, html 설정
reload
현재 페이지 새로고침
1WebView.reload() async;
goBack
이전 페이지로 돌아가기
1WebView.goBack() async;
goForward
다음 페이지로 이동
1WebView.goForward() async;
현재 창 문서 인쇄
1WebView.print(Integer mode = 1) async;
호출 매개변수:
- mode: 정수, 인쇄 매개변수, 0: 빠른 인쇄, 1: 표준 인쇄, 2: 인쇄 미리보기. 기본값은 1입니다.
printToPDF
현재 창 문서를 PDF 파일로 인쇄
1WebView.printToPDF(String file) async;
호출 매개변수:
- file: 문자열, pdf 경로 지정
executeJavaScript
현재 창에서 JavaScript 코드 실행
1WebView.executeJavaScript(String code) async;
호출 매개변수:
- code: 문자열, 실행할 JavaScript 코드 지정
executeDevToolsMethod
현재 창에서 DevTools 명령을 실행하고 결과를 반환합니다.
1
2Variant WebView.executeDevToolsMethod(String method,
Object params = {}) async;
호출 매개변수:
- method: 문자열, 실행할 DevTools 명령을 지정합니다.
- params: 개체, 명령의 매개변수를 지정합니다.
반환 결과:
- Variant, 실행 결과 반환
close
현재 창 닫기
1WebView.close() async;
postMessage
웹뷰에 메시지 보내기
1WebView.postMessage(String msg) async;
호출 매개변수:
msg: 문자열, 보낼 메시지
postMessage는 창이 로드된 후 메시지를 보내야 하며 그 전에 보낸 메시지는 손실됩니다. 따라서 onload 이벤트가 발생한 후에 이 메서드를 호출하는 것이 좋습니다.
on
이벤트 핸들러를 객체에 바인딩
1
2Object WebView.on(String ev,
Function func);
호출 매개변수:
- ev: 문자열, 이벤트 이름 지정
- func: 기능, 이벤트 처리 기능 지정
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
이벤트 핸들러를 객체에 바인딩
1Object WebView.on(Object map);
호출 매개변수:
- map: 개체, 이벤트 매핑 관계를 지정하고 개체 속성 이름을 이벤트 이름으로 사용하고 속성 값을 이벤트 처리 함수로 사용합니다.
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
addListener
이벤트 핸들러를 객체에 바인딩
1
2Object WebView.addListener(String ev,
Function func);
호출 매개변수:
- ev: 문자열, 이벤트 이름 지정
- func: 기능, 이벤트 처리 기능 지정
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
이벤트 핸들러를 객체에 바인딩
1Object WebView.addListener(Object map);
호출 매개변수:
- map: 개체, 이벤트 매핑 관계를 지정하고 개체 속성 이름을 이벤트 이름으로 사용하고 속성 값을 이벤트 처리 함수로 사용합니다.
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
prependListener
이벤트 핸들러를 객체의 시작 부분에 바인딩
1
2Object WebView.prependListener(String ev,
Function func);
호출 매개변수:
- ev: 문자열, 이벤트 이름 지정
- func: 기능, 이벤트 처리 기능 지정
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
이벤트 핸들러를 객체의 시작 부분에 바인딩
1Object WebView.prependListener(Object map);
호출 매개변수:
- map: 개체, 이벤트 매핑 관계를 지정하고 개체 속성 이름을 이벤트 이름으로 사용하고 속성 값을 이벤트 처리 함수로 사용합니다.
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
once
일회성 이벤트 처리 기능을 객체에 바인딩하면 일회성 처리 기능은 한 번만 트리거됩니다.
1
2Object WebView.once(String ev,
Function func);
호출 매개변수:
- ev: 문자열, 이벤트 이름 지정
- func: 기능, 이벤트 처리 기능 지정
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
일회성 이벤트 처리 기능을 객체에 바인딩하면 일회성 처리 기능은 한 번만 트리거됩니다.
1Object WebView.once(Object map);
호출 매개변수:
- map: 개체, 이벤트 매핑 관계를 지정하고 개체 속성 이름을 이벤트 이름으로 사용하고 속성 값을 이벤트 처리 함수로 사용합니다.
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
prependOnceListener
이벤트 핸들러를 객체의 시작 부분에 바인딩
1
2Object WebView.prependOnceListener(String ev,
Function func);
호출 매개변수:
- ev: 문자열, 이벤트 이름 지정
- func: 기능, 이벤트 처리 기능 지정
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
이벤트 핸들러를 객체의 시작 부분에 바인딩
1Object WebView.prependOnceListener(Object map);
호출 매개변수:
- map: 개체, 이벤트 매핑 관계를 지정하고 개체 속성 이름을 이벤트 이름으로 사용하고 속성 값을 이벤트 처리 함수로 사용합니다.
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
off
개체 처리 대기열에서 지정된 기능 취소
1
2Object WebView.off(String ev,
Function func);
호출 매개변수:
- ev: 문자열, 이벤트 이름 지정
- func: 기능, 이벤트 처리 기능 지정
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
개체 처리 대기열의 모든 기능 취소
1Object WebView.off(String ev);
호출 매개변수:
- ev: 문자열, 이벤트 이름 지정
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
개체 처리 대기열에서 지정된 기능 취소
1Object WebView.off(Object map);
호출 매개변수:
- map: 개체, 이벤트 매핑 관계를 지정하고 개체 속성 이름을 이벤트 이름으로 사용하고 속성 값을 이벤트 처리 함수로 사용합니다.
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
removeListener
개체 처리 대기열에서 지정된 기능 취소
1
2Object WebView.removeListener(String ev,
Function func);
호출 매개변수:
- ev: 문자열, 이벤트 이름 지정
- func: 기능, 이벤트 처리 기능 지정
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
개체 처리 대기열의 모든 기능 취소
1Object WebView.removeListener(String ev);
호출 매개변수:
- ev: 문자열, 이벤트 이름 지정
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
개체 처리 대기열에서 지정된 기능 취소
1Object WebView.removeListener(Object map);
호출 매개변수:
- map: 개체, 이벤트 매핑 관계를 지정하고 개체 속성 이름을 이벤트 이름으로 사용하고 속성 값을 이벤트 처리 함수로 사용합니다.
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
removeAllListeners
객체 처리 대기열에서 모든 이벤트의 모든 리스너를 취소합니다. 이벤트가 지정된 경우 지정된 이벤트의 모든 리스너를 제거합니다.
1Object WebView.removeAllListeners(String ev);
호출 매개변수:
- ev: 문자열, 이벤트 이름 지정
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
객체 처리 대기열에서 모든 이벤트의 모든 리스너를 취소합니다. 이벤트가 지정된 경우 지정된 이벤트의 모든 리스너를 제거합니다.
1Object WebView.removeAllListeners(Array evs = []);
호출 매개변수:
- evs: 배열, 이벤트 이름 지정
반환 결과:
- Object, 연쇄 호출에 편리한 이벤트 객체 자체를 반환
setMaxListeners
호환성을 위한 리스너 수의 기본 제한
1WebView.setMaxListeners(Integer n);
호출 매개변수:
- n: 정수, 이벤트 수 지정
getMaxListeners
호환성을 위해서만 리스너 수의 기본 제한을 가져옵니다.
1Integer WebView.getMaxListeners();
반환 결과:
- Integer, 기본 제한 번호로 돌아가기
listeners
쿼리 객체의 지정된 이벤트에 대한 리스너 배열
1Array WebView.listeners(String ev);
호출 매개변수:
- ev: 문자열, 이벤트 이름 지정
반환 결과:
- Array, 지정된 이벤트에 대한 리스너 배열을 반환합니다.
listenerCount
쿼리 개체의 지정된 이벤트에 대한 리스너 수
1Integer WebView.listenerCount(String ev);
호출 매개변수:
- ev: 문자열, 이벤트 이름 지정
반환 결과:
- Integer, 지정된 이벤트에 대한 리스너 수를 반환합니다.
쿼리 개체의 지정된 이벤트에 대한 리스너 수
1
2Integer WebView.listenerCount(Value o,
String ev);
호출 매개변수:
- o: 값, 쿼리의 개체를 지정합니다.
- ev: 문자열, 이벤트 이름 지정
반환 결과:
- Integer, 지정된 이벤트에 대한 리스너 수를 반환합니다.
eventNames
리스너의 이벤트 이름 쿼리
1Array WebView.eventNames();
반환 결과:
- Array, 이벤트 이름의 배열을 반환합니다.
emit
이벤트를 적극적으로 트리거
1
2Boolean WebView.emit(String ev,
...args);
호출 매개변수:
- ev: 문자열, 이벤트 이름
- args: ..., 이벤트 핸들러에 전달될 이벤트 매개변수
반환 결과:
- Boolean, 이벤트 트리거 상태로 돌아가서 응답 이벤트가 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.
toString
개체의 문자열 표현을 반환하고 일반적으로 "[네이티브 개체]"를 반환하며 개체는 고유한 특성에 따라 다시 구현할 수 있습니다.
1String WebView.toString();
반환 결과:
- String, 객체의 문자열 표현을 반환합니다.
toJSON
객체의 JSON 형식 표현을 반환하고 일반적으로 객체에 의해 정의된 읽을 수 있는 속성 모음을 반환합니다.
1Value WebView.toJSON(String key = "");
호출 매개변수:
- key: 문자열, 미사용
반환 결과:
- Value, 직렬화 가능한 JSON을 포함하는 값을 반환합니다.