다음 우편번호 API를 웹 전용 API이다.
http:// 를 기준으로 동작을 한다.
아이오닉으로 앱을 제작하면
file:// 로 기준이 잡혀버려서
다음 우편번호 API가 오작동하는걸 발견하여,
다음 우편번호 API를 담고있는 html를 만들고
iframe를 이용해서 화면에 출력 한 뒤,
postMessage를 이용하여 부모에게 결과값을 전달하는 방식으로 만들었다.
1. 다음 우편번호 Api를 담을 html 파일을 만든다.
- post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>POST</title>
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
</head>
<body>
<div class="map_container" style="position:fixed; width:100%; height:100%;"></div>
<script>
window.onload = function()
{
var map = document.getElementsByClassName( "map_container" )[ 0 ];
// 다음 우편번호 Api 생성
new daum.Postcode({
oncomplete : function( data )
{
var fullAddr = data.address;
var extraAddr = '';
if(data.addressType === 'R'){
if(data.bname !== ''){
extraAddr += data.bname;
}
fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
}
// postMessage 로 부모에게 결과값 던지기.
window.parent.postMessage({
zonecode : data.zonecode,
address : fullAddr,
isInput : true,
size : { width : 0, height : 0 }
}, "*" );
},
onresize : function( $size )
{
window.parent.postMessage({
zonecode : "",
address : "",
isInput : false,
size : $size
}, "*" );
},
width : "100%",
height : "80%",
maxSuggestItems : 10
}).embed( map, { autoClose : false } );
}
</script>
</body>
</html>
2. postMessage 로 부모에게 결과값 던지기 ( post.html )
window.parent.postMessage({
zonecode : data.zonecode,
address : fullAddr,
isInput : true,
size : { width : 0, height : 0 }
}, "*" );
3. iframe 삽입 ( index.html )
<iframe class="s5_iframe" ng-src="post.html" frameborder="0"></iframe>
4. 결과값 받기( controller.js )
window.addEventListener( "message", function( $data ){
console.log( $data );
}, false );
'frontend > Ionic angular 1' 카테고리의 다른 글
| 아이오닉( ionic ) - 스크롤값 : $ionicScrollDelegate (0) | 2017.11.15 |
|---|---|
| 아이오닉 로딩 - $ionicLoading (0) | 2017.11.06 |
| 아이오닉 팝업창 - $ionicPopup alert (0) | 2017.11.06 |
| QR - BarcodeScanner (0) | 2017.11.03 |
| $http 데이터 보내기 - params (0) | 2017.11.03 |