안드로이드개발 웹뷰의 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://indra17.tistory.com/entry/android-webview%EB%A1%9C-javascript-%ED%98%B8%EC%B6%9C-%EB%B0%8F-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B0%9B%EA%B8%B0

http://theeye.pe.kr/archives/1609