@JavaScriptInterface

웹뷰를 사용하는 앱을 개발하다 보면 웹뷰와 앱간의 통신이 필요한 경우가 있습니다. 더 자세히 말하자면 웹뷰의 자바스크립트와 안드로이드의 클라이언트 코드의 통신이 필요합니다. 이를 위한 방법으로 javasriptInterface를 사용할 수 있는데요. 그럼 이와 관련된 구글 가이드에 있는 예제를 확인해 보겠습니다.

구글 예제

1. javaScriptEnabled를 활성화 시켜준다.

val myWebView: WebView = findViewById(R.id.webview)
myWebView.settings.javaScriptEnabled = true

2. @JavascriptInterface 함수를 생성해준다.

/** Instantiate the interface and set the context  */
class WebAppInterface(private val mContext: Context) {

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

3. 위에서 생성한 클래스를 웹뷰에 추가해준다.

val webView: WebView = findViewById(R.id.webview)
webView.addJavascriptInterface(WebAppInterface(this), "Android")

4. 자바스크립트에서 안드로이드에 선언한 함수를 호출할 수 있다.

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

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