안드로이드 Webview(웹뷰) - 자바스크립트(웹) 상호작용

# 하이브리드 앱의 기초인 웹뷰와 자바스크립트로 된 웹간의 상호작용 부분입니다.

 

• 웹에서 앱의 메소드를 호출하는 방법

webSettings.setJavaScriptEnabled(true);

먼저 자바스크립트를 허용 해준 후,

 

webview.addJavascriptInterface(new WebAppInterface(this), "android");

이런식으로 웹에서 앱과의 상호작용 즉, 다리역할을 해줄 인터페이스를 짜줍니다.

웹에서는 호출할때, android라고 부르며 호출 시 WebAppInterface 클래스의 메소드들을 가져 옵니다.

 

• 웹 코드

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        android.showToast(toast);
    }
</script>

android를 부르고 WebAppInterface 안에있는 showToast를 호출합니다.

 

 

• WebAppInterface 예시

public class WebAppInterface {
        Context mContext;

        /** Instantiate the interface and set the context */
        WebAppInterface(Context c) {
            mContext = c;
        }

        /** Show a toast from the web page */
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }

 

결과적으로 웹에서 showToast를 호출하게 되고, 앱에서는 메시지를 출력하겠죠?

 

 

 

---

 

• 앱에서 웹의 메소드를 호출하는 방법

먼저, 이 방법은 굉장히 간단합니다.

앱에서 웹 페이지를 웹뷰로 열때 선언부에서 Webview mWebview; 로 선언했다고 가정합시다.

 

그러면 코드는 아래와 같습니다.

mWebview.loadUrl("javascript:<함수명>(파라미터)");

쉽죠?