-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
100 lines (92 loc) · 3.17 KB
/
index.html
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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://t1.daumcdn.net/mapjsapi/bundle/postcode/">
<link rel="dns-prefetch" href="https://t1.daumcdn.net/mapjsapi/bundle/postcode/">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
html, body { margin: 0; padding: 0; height: 100%; }
#container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#activity-indicator {
animation: rotate linear infinite 0.75s;
}
</style>
</head>
<body onLoad="init()">
<div id="container">
<svg id="activity-indicator" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" fill="none" r="14" stroke-width="4" style="stroke:#878E95;opacity:0.2">
</circle>
<circle cx="16" cy="16" fill="none" r="14" stroke-width="4" style="stroke:#878E95;stroke-dasharray:80;stroke-dashoffset:60">
</circle>
</svg>
</div>
<script>
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
const { query = undefined, ...daumPostcodeOptions } = params;
// 속성에 컬백 함수를 전달할 수 없게 함
delete daumPostcodeOptions['oncomplete'];
delete daumPostcodeOptions['onresize'];
delete daumPostcodeOptions['onclose'];
delete daumPostcodeOptions['onsearch'];
const onComplete = (data) => {
const queryParameters = Object.keys(data).reduce((parameters, key) => {
const param = data[key]
if (param) {
parameters.push(`${encodeURIComponent(key)}=${encodeURIComponent(param)}`)
}
return parameters
}, []).join('&');
window.location.href = `postcode://complete?${queryParameters}`;
if (!window.webkit) {
return
}
if (!window.webkit.messageHandlers) {
return
}
if (!window.webkit.messageHandlers.postcode) {
return
}
if (typeof window.webkit.messageHandlers.postcode.postMessage !== 'function') {
return
}
window.webkit.messageHandlers.postcode.postMessage(data)
}
const onScriptLoad = () => {
const webviewLayer = document.getElementById('container')
webviewLayer.innerHTML = ''
new daum.Postcode({
onsearch: () => window.scrollTo(0, 0),
oncomplete: onComplete,
width: '100%',
height: '100%',
...daumPostcodeOptions,
}).embed(webviewLayer, {
q: query,
// 선택 후에 자동으로 레이어가 닫히지 않도록 함
autoClose: false,
});
}
const init = () => {
const script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js'
script.async = true
script.onload = onScriptLoad
document.body.appendChild(script)
}
</script>
</body>
</html>