JavascriptInterface?

---

웹뷰(WebView)란 Android 어플리케이션이 직접 웹의 콘텐츠를 표시할 수 있도록 하는 Android OS용 시스템 구성 요소입니다. 이러한 웹뷰를 정말 많이 이용되고 있으며 웹뷰를 사용하여 앱을 개발하다 보면 웹뷰와 앱 간의 통신이 필요한 경우가 있습니다. 경우를 해결하기 위해서 앱 코드와 자바스크립트 코드 간에 인터페이스를 만들 수 있는 JavascriptInterface를 사용할 수 있습니다. 이번 글에서는 JavascriptInterfafe에 대한 사용 방법에 대해서 설명하고자 합니다.

JavascriptInterface 예제

[STEP1] INTERNET 권한 설정

 <manifest ... >
        <uses-permission android:name="android.permission.INTERNET" />
        ...
</manifest>
    

JavascriptInterface를 사용하기 위해서는 앱이 인터넷에 엑세스할 수 있어야 하므로 manifest 파일에서 INTERNET권한을 요청합니다.

[STEP2] 레이아웃에 WebView 추가

  <WebView
          android:id="@+id/webview"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
      />

레이아웃에서 사용할 WebView를 추가해줍니다.

[STEP3] 자바스크립트 사용 설정

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

기본적으로 자바스크립트는 WebView에서 사용이 불가능합니다. 위의 코드를 통해 WebView에 연결된 WebSettings을 통해서 사용을 설정해주어야 합니다.

[STEP4] 자바스크립트 코드 결합

     class WebAppInterface(private val mContext: Context) {

        @JavascriptInterface
        fun showToast(toast: String) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
        }
    }

자바스크립트 코드와 안드로이드 코드 간의 새 인터페이스를 결합하기 위해서 @JavascriptInterface를 호출합니다. 이를 통해 결합할 인스턴스와 자바스크립트가 클래스 액세스를 위해 호출할 수 있는 인터페이스 이름에 전달합니다.

[STEP5] 클래스를 WebView에 추가하기

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

addJavaScriptInterface()를 통해 WebView에서 실행되는 자바스크립트에 클래스를 결합하고 인터페이스에 "Android"라는 이름을 저장할 수 있습니다.

[FINISH]

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

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

이제 WebView가 이 인터페이스를 웹페이지에 사용할 수 있도록 설정하며 버튼을 클릭할 경우 showAndroidToast() 함수가 Android 인터페이스를 통하여 WebAppInterface.showToast() 메서드를 호출합니다.