안드로이드개발 웹뷰의 javascript 와 연동하기 ( 함수호출 )
웹뷰안에서 javascript 로 웹뷰의 함수를 호출하고 웹뷰에서 자바스크립트의 함수를 호출하는 이슈가 발생하여
각각 함수를 호출하는 방법을 적용해 보도록 하겠습니다.
1) 웹뷰에서 함수를 호출할 수 있도록 준비하기
예시로는 testMove 함수를 만들어 javascript 로 http://google.com 이란 url을 넘겨 웹뷰에서 google.com 으로 이동시키겠습니다.
1-1. MainActivity.java 의 MainActivity 상단에 Handler를 선언합니다.
private final Handler handler = new Handler();
1-2. androidbridge 클래스를 생성하여 그안에 동작을 원하는 함수를 만듭니다.
private class AndroidBridge {
public void testMove(final String arg) { // must be final
handler.post(new Runnable() {
@Override
public void run() {
// 원하는 동작
mWebView.loadUrl(arg);
}
});
}
}
1-3. onCreate 안에 만들어진 웹뷰의 자바스크립트 사용 설정아래 JavascriptInterface 로 bridge 인스턴스를 등록합니다.
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new AndroidBridge(), "WishroomAndroidApp");
2) 웹뷰에서 호출된 웹페이지에서 javascript 로 앱 함수 호출하기
2-1. 웹뷰안에서 javascript 로 함수를 실행해봅니다. sample 소스는 다음과 같습니다.
textclick() 함수를 호출했을때 지난시간에 내가 만든 안드로이드 앱인지 확인하고, 위시룸 안드로이드 앱인경우는 티스토리로 이동하는 소스입니다.
<script type="text/javascript">
function textclick(){
var broswerInfo = navigator.userAgent;
if(broswerInfo.indexOf("APP_WISHROOM_Android")>-1){
// 위시룸 안드로이드 앱이 맞다면 아래 내용 실행
window.WishroomAndroidApp.testMove("http://google.com");
}
}
</script>
2-2. 자 이제 앱을 실행하고 확인해볼까요? 두둥!! 에러가 똭 아래 에러 메세지
10-19 04:29:22.162: I/chromium(1211): [INFO:CONSOLE(47)] "Uncaught TypeError: Object [object Object] has no method 'testMove'", source: http://wishroom.kr/login (47)
2-3. 확인해보결과 안드로이드 4.2 부터는 @JavascriptInterface 를 붙여줘야한다네요. AndroidBridge 부분을 수정해봅시다
private class AndroidBridge {
@JavascriptInterface
public void testMove(final String arg) { // must be final
handler.post(new Runnable() {
@Override
public void run() {
// 원하는 동작
mWebView.loadUrl(arg);
}
});
}
}
2-4. 빨간부분을 클릭하면 google.com 으로 이동~
3) 안드로이드에서 웹뷰의 javascript 함수 실행하기
3-1) javascript 함수 실행은 webview.loadUrl 을 이용하면됩니다.
<script type="text/javascript">
function msgback(){
alert("뒤로가기를 누르셨습니다.");
}
</script>
mWebView.loadUrl("javascript:msgback()");
참고 URL :
http://theeye.pe.kr/archives/1609