웹뷰 WebView 와 안드로이드(Android) 간의 Javascipt 연결

안드로이드에서 웹뷰를 생성하여 웹사이트를 로드한 경우, 

웹뷰내에 로드된 페이지에서 특정 버튼이나 메뉴가 클릭되었을 경우,

안드로이드 코드내의 특정 Javascript 함수를 호출해야 하는 경우가 있다.

반대로, 안드로이드 쪽에서 버튼이나 메뉴를 클릭했을 때, 

웹뷰내에 로드된 페이지의 특정 Javascript 함수를 호출해야하는 경우가 있다

먼저, 안드로이드 에서 웹뷰에 로드된 페이지의 Javascript 함수를 호출하려면 

아래와 같이 호출하면 된다. 

mWebView.loadUrl("javascript:TestFunction()");

웹뷰내의 페이지에는 다음과 같이 구현되어 있어야 한다. 

function TestFunction() {

   // 웹페이지에서 실행할 동작을 기술

}

반대로, 웹뷰내의 페이지에서 안드로이드의 함수를 호출할 때는 다음과 같이 하면 된다. 

MainActivity 내에 아래 내용을 추가합니다.

import android.os.Handler;

import android.webkit.JavascriptInterface;

    private class AndroidBridge {

        @JavascriptInterface

        public void AlertMsg(final String arg) { // 웹뷰내의 페이지에서 호출하는 함수

            handler.post(new Runnable() {

                @Override

                public void run() {

                    Toast.makeText( MainActivity.this,arg, Toast.LENGTH_SHORT).show();                }

            });

        }

    }

WebSettings webSettings = mWebView.getSettings();

webSettings.setJavaScriptEnabled(true);

mWebView.getSettings().setJavaScriptEnabled(true);

mWebView.addJavascriptInterface(new AndroidBridge(), "MyTestApp");

아래 내용은 웹뷰에 로드되는 페이지에 기술할 내용입니다. 

function CallAndroid(){

var broswerInfo = navigator.userAgent;

if(broswerInfo.indexOf("Android")>-1) {

window.MyTestApp.AlertMsg("웹뷰에서 호출된 메시지입니다");

}

}

<input type = "button" OnClick = "javascritp:CallAndroid()" value = "안드로이드의 JavaScript 호출하기">

페이지 내의 버튼을 클릭하면 아래와 같이 안드로이드의 Javascript 를 호출하여 메시지를 뿌려주게됩니다.

이상으로 웹뷰 WebView 와 안드로이드(Android) 간의 Javascipt 연결 방법이었습니다.