Programming/Hybrid App

[Android, Hybrid] JavascriptInterface 사용법.

Fimtrus 2014. 6. 24. 14:21

아이폰의 경우 Native와 Web간의 통신을 위해서 scheme를 이용하지만 


안드로이드에서는 JavascriptInterface를 이용하여 더욱 편하게 데이터를 주고 받을 수 있다.

예제로 간단한 Toast를 보여주는 인터페이스를 만들어 보겠다.


먼저 웹뷰에 추가 시킬 JavascriptInterface 클래스를 만든다.


public class WebViewInterface {

	private WebView mAppView;
	private Activity mContext;

	/**
	 * 생성자.
	 * @param activity : context
	 * @param view : 적용될 웹뷰
	 */
	public WebViewInterface(Activity activity, WebView view) {
		mAppView = view;
		mContext = activity;
	}
	/**
	 * 안드로이드 토스트를 출력한다. Time Long.
	 * @param message : 메시지
	 */
	@JavascriptInterface
	public void toastLong (String message) {
		Toast.makeText(mContext, message, Toast.LENGTH_LONG).show();
	}
	/**
	 * 안드로이드 토스트를 출력한다. Time Short.
	 * @param message : 메시지
	 */
	@JavascriptInterface
	public void toastShort (String message) { // Show toast for a short time
		Toast.makeText(mContext, message, Toast.LENGTH_SHORT).show();
	}
}

안드로이드 4.3.X 젤리빈 이상부터 "@JavascriptInterface" annotation을 붙이지 않을 경우

해당 메쏘드는 동작하지 않기 때문에 반드시 붙여줘야한다.(킷캣이상인가??;;)



그리고 Activity의 onCreate 혹은 Fragment의 onCreateView 에서 loadUrl이 불리기전에

WebView 객체의 addJavascriptInterface 메쏘드를 이용해 연결시켜 주면 바로 사용할 수 있다.

무지 간단하다!

public class MainActivity {

	private WebView mWebView = null;
	private WebViewInterface mWebViewInterface;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		getWindow().requestFeature(Window.FEATURE_PROGRESS);
		setContentView(R.layout.activity_main);
		mWebView = (WebView) findViewById(R.id.webview); //웹뷰 객체
		mWebViewInterface = new WebViewInterface(MainActivity.this, mWebView); //JavascriptInterface 객체화
		mWebView.addJavascriptInterface(mWebViewInterface, "Android"); //웹뷰에 JavascriptInterface를 연결
	}
}

addJavascriptInterface를 보면 인터페이스 객체와, 웹에서 사용될 객체 명을 넣어준다.

위와 같이 연결을 하게 되면, 웹페이지에 window.Android 객체가 생성되고, WebViewInterface에 정의된

모든 메쏘드를 사용할 수 있게 된다.


웹페이지에 아래와 같이 입력하게 되면, 안드로이드 Toast를 통해 "JavascriptInterface Test"라는 문구가 보이게 된다.

window.Android.toastShort( "JavscriptInterface Test" );