안드로이드에서 자바스크립트 함수 호출 - andeuloideueseo jabaseukeulibteu hamsu hochul

[안드로이드] 웹뷰에서 자바스크립트로 네이티브 코드 호출

안드로이드 웹뷰에서 자바스크립트를 이용해서 네이티브 코드를 호출하는 방법입니다.

아래와 같이 WebAppInterface 라는 클래스를 액티비티의 내부 클래스로 만듭니다.

public class MainActivity extends AppCompatActivity { ... public class WebAppInterface { Context mContext; WebAppInterface(Context c) { mContext = c; } @JavascriptInterface public void showToast(String toast) { Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); } ... } } webView 인스턴스에 자바스크립트 인터페이스를 셋팅해 줍니다. 파라미터 중 Android 라는 스트링은 웹뷰에서 호출 시 사용되는 명칭입니다. webView.getSettings().setJavaScriptEnabled(true); webView.addJavascriptInterface(new WebAppInterface(this), "Android");

웹뷰의 웹 페이지에서는 스크립트로 아래와 같이 호출합니다.

<script> Android.showToast("안녕하세요."); </script>

로컬 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()+"')"); } });

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

출처: //unabated.tistory.com/entry/안드로이드-하이브리드-앱-2-WebView과-App간-통신하기?category=349263 [랄라라]

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : AndroidStudio

개발 언어 : java

/* =========================== */

​

/* =========================== */

[소스 코드]

/** ========= [자바스크립트에서 안드로이드 호출하기 - 경로 지정] ========= **/ public void Javascript_To_Android(){ //TODO [자바스크립트 부분 : 예제 [1]] /** function JsToAndo() { window.location.close('JS TO Mobile'); // [안드로이드에서 브릿지 경로 location 정의 / 안드로이드 브릿지 내부에서 정의한 close() 메소드] } */ //TODO [안드로이드 부분 : 예제 [1]] main_webview.addJavascriptInterface(new AndroidBridge(), "location"); //자바스크립트에 대응할 함수를 정의한 클래스 붙여줌 //TODO [자바스크립트 부분 : 예제 [2]] /** function JsToAndo() { window.media.intent('Web TO Mobile [INTENT]'); // [안드로이드에서 브릿지 경로 media 정의 / 안드로이드 브릿지 내부에서 정의한 intent() 메소드] } */ //TODO [안드로이드 부분 : 예제 [2]] main_webview.addJavascriptInterface(new AndroidBridge(), "media"); //자바스크립트에 대응할 함수를 정의한 클래스 붙여줌 } /** ========= [안드로이드에서 자바스크립트 호출하기] ========= **/ class Android_To_Javascript{ public void TestMethod(){ try { //TODO [안드로이드 부분 - 일반 호출 : 예제 [1]] main_webview.loadUrl("javascript:AndoToJs('')"); //TODO [자바스크립트 부분 - 일반 호출 : 예제 [1]] /** function AndoToJs() { alert('Mobile > JS'); } */ //TODO [안드로이드 부분 - 데이터 전송 : 예제 [2]] main_webview.loadUrl("javascript:AndoToJs('"+String.valueOf("HELLO")+"')"); //TODO [자바스크립트 부분 - 데이터 전송 : 예제 [2]] /** function AndoToJs(velue) { alert(velue); } */ } catch (Exception e){ e.printStackTrace(); } } }

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[파일 첨부]

소스코드.txt

0.06MB

javaScriptTest.html

0.01MB

mediaTest.html

0.01MB

/* =========================== */