WebView 컴포넌트 소개

윈도우 운영체제 NRE에서 WebBrowser 컴포넌트는 Internet Explorer를 지원하지 않는 콘텐츠를 표시하는데 제약이 있습니다. 이런 제약을 해소하고자 Microsoft Edge WebView2 Control 기반으로 동작하는 WebView 컴포넌트를 지원하고 있습니다.

WRE에서는 WebBrowser 컴포넌트와 똑같이 iframe 기반으로 동작합니다. 다만, 일부 속성이나 메서드 사용 방식은 다를 수 있습니다.

크로스 도메인 환경에서 메시지 전달하기

크로스 도메인 환경에서 정해진 규칙에 따라 메시지를 전송하고 수신하는 방법에 관해 설명합니다.

예제

하늘색 배경색으로 표시된 박스 영역은 WebView 컴포넌트에서 다른 도메인 콘텐츠를 로딩한 것입니다. 나머지 영역은 넥사크로 애플리케이션입니다. 크로스 도메인 환경에서 간단한 메시지를 전송하고 수신하는 것을 보여줍니다.

sample_webview_01.xfdl

예제에서 사용한 핵심 기능

postMessage

넥사크로 애플리케이션에서 다른 도메인 콘텐츠에 메시지 전달 시 사용하는 메서드입니다. Web API에서 제공하는 postMessage 메서드를 사용하고 있습니다.

onmessage

다른 도메인 콘텐츠에서 postMessage 메서드로 넥사크로 애플리케이션으로 보낸 메시지를 수신하는 이벤트입니다.

예제 구현 방법

다른 도메인 콘텐츠를 로딩할 WebView 컴포넌트를 배치하고, WebView 컴포넌트에서 로딩한 콘텐츠로 메시지를 보내기 위해 Edit, Button 컴포넌트를 배치합니다. TextArea 컴포넌트는 전송하거나 수신한 메시지를 보여주기 위한 용도로 배치합니다.

넥사크로 애플리케이션과 비슷하게 input, button 태그를 사용해 메시지를 전송할 수 있는 HTML 화면을 구성하고 다른 도메인에서 실행될 수 있게 설정합니다.

예제에서는 아래 URL에 있는 콘텐츠를 호출합니다.

https://tobesoft-docs.github.io/sample_Nexacro_N_V24/post_message_test.html

Button 컴포넌트 클릭 시 처리되는 이벤트 핸들러 함수는 다음과 같습니다. postMessage 메서드의 첫 번째 매개변수는 입력한 메시지이고, 두 번째 매개변수는 메시지를 수신하는 쪽 도메인입니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	const msg = this.Edit00.value;
	this.WebView00.postMessage(msg, "https://tobesoft-docs.github.io/");
	this.log("Send: "+msg);
};

HTML 쪽에서도 메시지를 받는 이벤트를 설정해야 합니다. 수신하는 쪽에서는 보내는 대상을 특정할 수는 없지만 event 속성으로 제공되는 origin이나 data 속성값을 확인하고 메시지를 처리할지 여부를 선택할 수 있습니다.

window.addEventListener("message", function (event) {
    const time = new Date().toLocaleTimeString();
    log("Receive: origin: " + event.origin + " / data: " + event.data);
    targetWindow = event.source;
});

HTML 콘텐츠에서 버튼 클릭 시 처리되는 이벤트 핸들러 함수는 다음과 같습니다. HTML 콘텐츠에서는 postMessage 메서드를 사용할 때 대상이 되는 윈도우 객체를 지정해야 하는데, WebView 컴포넌트로 실행한 경우에는 window.parent로 지정하면 되고, 메시지 수신을 먼저 한 경우에는 event.source 속성을 사용해 대상 윈도우 객체를 설정할 수 있습니다.

let targetWindow;
function sendMessage() {
    const msg = document.getElementById('msgInput').value;

    if(!targetWindow)
        targetWindow = window.parent;
		
    targetWindow.postMessage(msg, "*");
    log("Send: " + msg);
}

넥사크로 애플리케이션 쪽에서는 WebView 컴포넌트에 onmessage 이벤트 핸들러 함수를 작성하고 메시지를 수신합니다.

this.WebView00_onmessage = function(obj:nexacro.WebView,e:nexacro.WebMessageEventInfo)
{
	this.log("Receive: origin: "+e.origin+" / data: "+e.data);
};

넥사크로 애플리케이션에서는 TextArea 컴포넌트에 수신, 송신한 시간을 기록하고 메시지를 표시합니다.

this.log = function(text)
{
	const now = new Date();
	this.TextArea00.insertText("["+now.getTime()+"] "+text+'\n', 0);
}

HTML 콘텐츠에서는 div 태그 안에 innerHTML을 설정하는 방식으로 메시지를 표시합니다.

function log(text) {
    const logEl = document.getElementById('log');
    const now = new Date();
    logEl.innerHTML = "["+now.getTime()+"] "+text + "<br>" + logEl.innerHTML;
}

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다. 메시지 전송 버튼 클릭 시 다른 도메인 간 메시지가 정상적으로 전송되고 수신되는 것을 확인할 수 있습니다.