이번 글에서는 WebView의 데이터를 Native로 넘기는 방법을 알아보겠습니다.
기본 개념은 웹 페이지에서 호출할 수 있는 함수를 정의해서 웹 페이지에서 그 함수를 호출할 수 있도록 하는 것입니다.
네이티브에서 할 일은 WebView의 addJavascriptInterface() 메소드를 통해서 Object 객체와 String을 넘기는 것입니다.
- 여기서 String은 자바스크립트에서 호출할 클래스 이름이다.
- Object 객체의 메소드 이름은 자바스크립트에서 호출할 메소드 이름과 동일하다.
- 젤리빈 (JellyBean)부터 메소드는 @JavascriptInterface annotation을 갖는 public 메소드 이어야 한다.
자세한 설명은 안드로이드 공식 홈페이지 를 참조하세요.
이상을 그림으로 그려보면 다음과 같습니다.
네이티브에서 justDoIt() 메소드를 정의하고, 웹에서는 자바스크립트로 원하는 시점에 window.Zeany.justDoIt() 메소드를 호출하는 식으로 동작합니다.
네이티브 소스는 다음과 같습니다.
1 2 3 4 5 6 | mWebView.addJavascriptInterface(new Object() { @JavascriptInterface public void justDoIt(String keyword) { Toast.makeText(MainActivity.this, "Keyword is " + keyword, Toast.LENGTH_LONG).show(); } }, "Zeany"); |
호출할 javascript 코드가 포함된 HTML(file:///android_asset/www/index.html)은 다음과 같습니다.
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 onsubmit="window.Zeany.justDoIt(elements[0].value); return true;"> <input id="keyword" type="text" placeholder="keyword"> <button type="submit">Submit</button> </form> </div> </body> </html> |
앱을 실행해보면 submit 버튼을 누를 때 마다 입력한 keyword가 Toast로 보이는 것을 볼 수 있습니다.
이상으로 마치고 싶지만, 안드로이드 Native와 Web View 연동 (1)에서 이야기 했듯이 기본 전제는 안드로이드 앱을 고려하지 않은 HTML을 가지고 앱을 구현하는 것이었습니다.
즉, 웹페이지에 window.Zeany.justDoIt() 을 호출하는 자바스크립트 코드가 있을리 없습니다.
이 부분을 해결하는 것은 안드로이드 Native와 Web View 연동 (3)에서 이야기 하겠습니다.
※ 이 프로젝트는 https://github.com/zeany/webview 에 있으며 아래 명령으로 소스를 가져올 수 있습니다.
(이미 git clone 으로 프로젝트를 내려 받은 경우에는 프로젝트 홈 디렉토리에서 git checkout 만 하면 됩니다.)
git clone https://github.com/zeany/webview.git
cd webview
git checkout -f step-7
'Android' 카테고리의 다른 글
| 안드로이드 SharedPreferences 사용법 (0) | 2017.01.09 |
|---|---|
| 안드로이드 Native와 WebView 연동 (3) (2) | 2017.01.05 |
| 안드로이드 Native와 WebView 연동 (1) (4) | 2017.01.03 |
| 안드로이드에서 로컬 html 파일의 저장 위치 및 URL (5) | 2017.01.03 |
| 안드로이드 Launcher Icon 등록 (4) | 2017.01.02 |
