postcode/index.html at master · moonpang/postcode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

<!DOCTYPE html>

<html>
<head>
</head>
<body onload="execDaumPostcode()">

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>

<div id = "layer" style = "display:block; position:absolute; overflow:hidden; z-index:1; -webkit-overflow-scrolling:touch; ">

</div>

<script src="https://spi.maps.daum.net/imap/map_js_init/postcode.v2.js"></script>
<script>
  window.addEventListener("message", onReceivedPostMessage, false);
  function onReceivedPostMessage(event){

    //..ex deconstruct event into action & params
    var action = event.data.action;
    var params = event.data.params;
//        alert("onReceivedPostMessage params");
    console.log("onReceivedPostMessage "+event);
  }
  function onReceivedActivityMessageViaJavascriptInterface(json){
    alert("onReceivedActivityMessageViaJavascriptInterface 01");
    //..ex deconstruct data into action & params
    var data = JSON.parse(json);
    var action = data.action;
    var params = data.params;
    console.log("onReceivedActivityMessageViaJavascriptInterface "+event);
  }
  function postMessageToiOS(postData) {


      alert("12 주소 된다?!!! : " + postData.addr);

    window.postMessage(postData.addr, "*");
    alert("넘긴듯?");
//    window.webkit.messageHandlers.callBackHandler.postMessage(postData, "*");

//    window.webkit.messageHandlers.reactNative.postMessage(postData);

/*
      window.postMessage(postData.addr);

      if ( window.webkit.messageHandlers.reactNative ) {
        alert("window.webkit.messageHandlers.reactNative");
//        window.webkit.messageHandlers.reactNative.postMessage(postData)
      }
      else {
        alert("else");
      }
      */

      //window.webkit.messageHandlers.callBackHandler.postMessage(postData);
  }
  var element_layer = document.getElementById('layer');
  function execDaumPostcode() {
    new daum.Postcode({
      oncomplete: function(data) {
        var fullAddr = data.address; // 최종 주소 변수
        var extraAddr = ''; // 조합형 주소 변수
        if(data.addressType === 'R'){
          if(data.bname !== ''){
            extraAddr += data.bname;
          }
          if(data.buildingName !== ''){
            extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
          }
          fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
        }
        var fullRoadAddr = data.roadAddress; // 도로명 주소 변수
        var extraRoadAddr = ''; // 도로명 조합형 주소 변수
        if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
          extraRoadAddr += data.bname;
        }
        if(data.buildingName !== '' && data.apartment === 'Y'){
          extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
        }
        if(extraRoadAddr !== ''){
          extraRoadAddr = ' (' + extraRoadAddr + ')';
        }
        if(fullRoadAddr !== ''){
          fullRoadAddr += extraRoadAddr;
        }
        var postData = {
            postcode : data.postcode,
            zonecode : data.zonecode,
            addr : fullRoadAddr
        };
        window.postMessageToiOS(postData);
      },
      width : '100%',
      height : '100%'
    }).embed(element_layer);
    element_layer.style.display = 'block';
    initLayerPosition();
  }

  function initLayerPosition(){
    var width = (window.innerWidth || document.documentElement.clientWidth); //우편번호서비스가 들어갈 element의 width
    var height = (window.innerHeight || document.documentElement.clientHeight); //우편번호서비스가 들어갈 element의 height
    var borderWidth = 5; //샘플에서 사용하는 border의 두께
    element_layer.style.width = width + 'px';
    element_layer.style.height = height + 'px';
    element_layer.style.border = borderWidth + 'px solid';
    element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width)/2 - borderWidth) + 'px';
    element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height)/2 - borderWidth) + 'px';
  }
</script>


</body>
</html>