안드로이드 Native와 WebView 연동 (2) 에서는 어떻게 웹페이지의 값을 Native로 가져올 수 있는지에 대해서 살펴봤습니다. 하지만, 이 과정에서 웹페이지를 수정해야 했는데, 이번 글에서는 이 부분을 제거하여 원래 목적했던 웹페이지 수정 없이 데이터를 가져올 수 있는 방안을 완성하도록 하겠습니다.
우선 웹 페이지를 기존처럼 되돌립니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div> <p>Simple HTML</p> <form> <input id="keyword"type="text" placeholder="keyword"> <button type="submit">Submit</button> </form> </div> </body> </html> |
기본 원리는 HTML이 로딩되는 것을 Native에서 알 수 있으니 그 시점에 원하는대로 DOM을 수정하는 것입니다.
이미 로딩 완료된 시점에 Native에서 웹페이지로 데이터를 전달하는 작업을 WebViewClient의 onPageFinished() 메소드를 통해서 진행했었습니다.
이 부분의 코드를 아래처럼 수정합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @Override public void onPageFinished(WebView view, String url) { // 여기서 WebView의 데이터를 가져오는 작업을 한다. if (url.equals(ENTRY_URL)) { String keyword = "tistory"; String script = "javascript:function afterLoad() {" + "document.getElementById('keyword').value = '" + keyword + "';" + "document.forms[0].setAttribute('onsubmit', 'window.Zeany.justDoIt(elements[0].value); return true;');" + "};" + "afterLoad();"; view.loadUrl(script); } } |
살펴보면 9라인의 document.forms[0].setAttribute('onsubmit', 'window.Zeany.justDoIt(elements[0].value); return true;'); 만 afterLoad() 함수에 추가된 것을 알 수 있습니다.
이를 통해 index.html (ENTRY_URL)의 첫번째 form (forms[0])이 submit 될 때 (onsubmit) 원하는 함수를 호출할 수 있습니다. 참고로 onsubmit의 경우 정상처리 되었다면 반드시 return true를 해줘야 submit이 진행됩니다.
이상으로 안드로이드 Native와 WebView 연동에 대한 설명을 마칩니다.
※ 이 프로젝트는 https://github.com/zeany/webview 에 있으며 아래 명령으로 소스를 가져올 수 있습니다.
(이미 git clone 으로 프로젝트를 내려 받은 경우에는 프로젝트 홈 디렉토리에서 git checkout 만 하면 됩니다.)
git clone https://github.com/zeany/webview.git
cd webview
git checkout -f step-8
'Android' 카테고리의 다른 글
| 안드로이드 Native에서 Angular JS로 구현된 웹페이지를 보여주는 WebView에 값을 전달하는 방법 (0) | 2017.01.09 |
|---|---|
| 안드로이드 SharedPreferences 사용법 (0) | 2017.01.09 |
| 안드로이드 Native와 WebView 연동 (2) (0) | 2017.01.04 |
| 안드로이드 Native와 WebView 연동 (1) (4) | 2017.01.03 |
| 안드로이드에서 로컬 html 파일의 저장 위치 및 URL (5) | 2017.01.03 |
