아이폰의 경우 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" );
'Programming > Hybrid App' 카테고리의 다른 글
| [Hybrid, Web] 키 입력시 숫자만 가능하도록 세팅. (0) | 2016.06.10 |
|---|---|
| [Android, Hybrid]openFileChooser 킷캣에서 동작하지 않는 문제( openFileChooser Kitkat bug ) (43) | 2014.06.24 |
| [HTML5] audio, video tag 지원 유무 확인 (0) | 2014.04.28 |
| [Javascript] html tag 내에 있는 데이터 제거. (0) | 2014.04.08 |
| [Javascript] 정규식. 전화번호, 휴대폰 번호 추출. 검증 (0) | 2013.12.20 |