안드로이드에서 자바스크립트 함수 호출 - 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()+"')");            
        }
       });

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

출처: https://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

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