Android webview javascript 함수 호출 - Android webview javascript hamsu hochul

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

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

안드로이드 코드내의 특정 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("웹뷰에서 호출된 메시지입니다");

}

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

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

참고 : http://devian.tistory.com/159

PlayStore 에 등록시 보안이슈 발생 해결방안 보기

로컬 HTML(JavaScript)과 App 영역이 통신(함수호출)을 함으로써 간단한 하이브리드 앱을 만들어볼 수 있다.

1. HTML에서 App 함수 호출
1) 멤버로 android.os.Handler 를 생성한다. 호출 시 thread 처리를 위해서 이용된다.
private final Handler handler = new Handler();

   2) App과 Javascript간 Bridge 클래스를 생성하고, 호출될 함수를 implement 한다.
       (이 때 파리메터는 반드시 final로 선언)
       Javascript에서 호출시 별도의 Thread로 구동될 수 있도록 아래와 같이 구현한다.

    private class AndroidBridge {
            public void setMessage(final String arg) { // must be final
                handler.post(new Runnable() {
                    public void run() {
                        Log.d("HybridApp", "setMessage("+arg+")");
                        mTextView.setText(arg);
                    }
                });
            }
          }

3) onCreate 함수에서 WebView에서 JavaScript를 Enable 하고, JavaScriptInterface로 Bridge 인스턴스를 등록한다.

        // 웹뷰에서 자바스크립트실행가능
        mWebView.getSettings().setJavaScriptEnabled(true);
        // Bridge 인스턴스 등록
        mWebView.addJavascriptInterface(new AndroidBridge(), "HybridApp");

4) HTML 내에서 JavaScript에서 선언된 함수를 다음과 같이 호출 한다.
window.<interfaceName>.<functionName>

window.HybridApp.setMessage(msg);

2. App에서 HTML의 Javascript 함수 호출
   이부분은 간단하다....HTML에거 링크걸 때를 생각하면 되는데....
   그냥 버튼을 눌렀을 때 다음과 같이 호출하면 된다.
    mWebView.loadUrl("javascript:<함수명>('<arg>')");

실제 구현은 다음과 같이 된다.

       mButton.setOnClickListener( new OnClickListener(){
        public void onClick(View view) {
            mWebView.loadUrl("javascript:setMessage('"+mEditText.getText()+"')");
        }
       });

위의 방법으로 연결된 간단한 하이브리드 어플리케이션이다...

1. Android에서 Javascript함수 호출하기
webView.loadUrl("javascript:callJS('Hello from Android')");
다음과 같은 방식으로 javascript:methodname 과 같은 문자열을 넣어 WebView.loadUrl 메소드의 인자로 호출한다.

2. Javascript에서 Android 호출하기

/** Object exposed to JavaScript */
    private class AndroidBridge {
       public void callAndroid(final String arg) { // must be final
          handler.post(new Runnable() {
             public void run() {
                Log.d(TAG, "callAndroid(" + arg + ")");
                textView.setText(arg);
             }
          });
       }
    }

다음과 같이 브릿지 역활을 할 Class를 만든다.

WebView의 세팅을 바꾸고

webView.getSettings().setJavaScriptEnabled(true);

WebView에 Javascript Interface를 추가해준다.

webView.addJavascriptInterface(new AndroidBridge(),"android2");

HTML페이지에서 다음과 같은 방식으로 호출한다.

window.android2.callAndroid('Hello from Browser')

android2는 addJavascriptInterface의 두번째 인자와 같다.

3. Javascript Listener 걸기

webView.setWebChromeClient(new WebChromeClient() {
           @Override
           public boolean onJsAlert(final WebView view,
                 final String url, final String message,
                 JsResult result) {
              Log.d(TAG, "onJsAlert(!" + view + ", " + url + ", "
                    + message + ", " + result + ")");
              Toast.makeText(LocalBrowser.this, message, 3000).show();
              result.confirm!();
              return true; // I handled it
           }
        });

다음과 같이 WebView의 setWebChromeClient를 이용한다.

위 예제는 Javascript의 alert메소드 발생시 이벤트이다.

=============================================================================================================