활용예제 가이드

이 화면은 Daum에서 제공하는 우편번호 조회서비스 연동에 대한 샘플 화면이다.

1. 크로스도메인 이슈가 없으면 screen.loadjs API로 구현이 가능하다.

2. 별도의 웹페이지를 구성하여 WebBrowser 컴포넌트에 임베디드하여 구현이 가능하다.

3. xFrame5.html에 링크하여 구현이 가능하다.

Daum 우편번호 조회서비스 : https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js

Daum 우편번호 조회서비스 가이드 : http://postcode.map.daum.net/guide

템플릿 위치: /HTML5/UTIL/EXTLIB/search_zipcode_daum

템플릿 파일

////////////////////////////////////////////////////////////////////////////////////////////////
// screen.loadjs 사용방식
function searchzipcode_on_mouseup(objInst)
{
	screen.loadjs("https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js", "getpostcode");
}

function getpostcode(strUrl, bSuccess)
{
	new daum.Postcode({
        oncomplete: function(data) {
			fld_zipcode.settext(data.zonecode);
			fld_address.settext(data.roadAddress);
        }
    }).open();
}


////////////////////////////////////////////////////////////////////////////////////////////////
// WebBrowser 컴포넌트 임베디드 방식
function searchzipcode2_on_mouseup(objInst)
{
	web01.seturl("http://127.0.0.1:9090/postcode.html");
}

function screen_on_postmessage(message, origin, src_screeninst)
{
	var data = JSON.parse(message);
	fld_zipcode2.settext(data.zonecode);
	fld_address2.settext(data.roadAddress);
}


////////////////////////////////////////////////////////////////////////////////////////////////
// xFrame5.html 링크방식
function searchzipcode3_on_mouseup(objInst)
{
	new daum.Postcode({
        oncomplete: function(data) {
			fld_zipcode3.settext(data.zonecode);
			fld_address3.settext(data.roadAddress);
        }
    }).open();
}

postcode.html

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>우편번호 조회(Daum)</title>
</head>
<body>
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    new daum.Postcode({
        oncomplete: function(data) {
			window.parent.postMessage(JSON.stringify(data), '*');
        }
    }).open();
</script>
</body>
</html>

Daum 우편번호 조회 샘플 가이드

예시

화면 스크립트

postcode.html