guide:util:extlib:search_zipcode_daum [xFrame5 TechNet]

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== Daum 우편번호 조회 샘플 가이드 ======

이 화면은 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

템플릿 파일
  * [[xf5projecthome>template/screen/HTML5/UTIL/EXTLIB/search_zipcode_daum.xml|search_zipcode_daum.xml]]
  * [[xf5projecthome>template/screen/HTML5/UTIL/EXTLIB/search_zipcode_daum.js|search_zipcode_daum.js]]
  * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/UTIL/EXTLIB/search_zipcode_daum|새창으로 실행]]
  * [[xf5projecthome>template/screen/HTML5/UTIL/EXTLIB/postcode.html|postcode.html]]

<php>
echo '<html>';
echo '<iframe src="';
echo $conf['plugin']['xf5']['xf5projecthome'], 'template/template.html?';
echo 'xframe_screen_url=/HTML5/UTIL/EXTLIB/search_zipcode_daum"';
echo ' class="_xf5_iframe"';
echo ' style="';
echo $conf['plugin']['xf5']['xf5iframestyle'];
echo '">';
echo '</iframe>';
echo '</html>';
</php>

==== 화면 스크립트 ====
<sxh javascript>
////////////////////////////////////////////////////////////////////////////////////////////////
// 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();
}
</sxh>

==== postcode.html ====
<sxh 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>
</sxh>