[안드로이드 스튜디오 코틀린] JavaScript와 연결해주는 Android Bridge - Kotlin 정리

 

 

 

 

 

 

 

WebView를 사용하다 보면 WebView 내에 있는 기능을 사용하고 싶을 때가 있다.

연결한 WebView의 내부 기능을 사용할 땐 JavaScript에 접근해야 한다.

이렇게 WebView의 Web (JavaScript)과 Android를 연결해주는 것이 AndroidBridge 이다.

AndroidBridge는 함수, 라이브러리 같은 기능은 아니고 @JavascriptInterface 어노테이션을 통한 연결로 이루어져 있다.

(Android 4.2 이상에서 실행할 때 무조건 @JavascriptInterface 을 추가해주어야 함)

 

 

 

 

 

 

@JavascriptInterface : 자바스크립트 인터페이스로 메소드를 JavaScript에 노출할 수 있도록 하는 주석으로, 

import android.webkit.JavascriptInterface

를 import 해주면 된다.

 

 

 

 

 

 

 

 

 

 

AndroidBridge를 연결하는 방법은 크게 두가지가 있다. 

 

1. 웹에서 앱(앱에 있는 함수)을 호출

2. 앱에서 웹(웹에 있는 함수)을 호출

 

 

 

 

 

 

 

 

 

 

 

 

1. 웹에서 앱을 호출

 

 

- 방법

 

(1). Kotlin 에 AndroidBridge Class 를 생성하고 웹과 연결해 줄 함수를 만들어준다.

class AndroidBridge() {

    @JavascriptInterface
    fun callAndroid() {
        // 원하는 함수 입력
    }
}

 

 

 

 

 

 

 

 

 

(2). layout에 webView를 하나 만들어주고 layout 연결을 해준다.

// layout webview와 연결하는 변수 만들어 줌
val webView: WebView = findViewById(R.id.webview)

// webView에서 자바스크립트를 허용
webView.settings.javaScriptEnabled = true


//webView가 연결 될 주소 Url
webView.loadUrl("https://www.naver.com/")

// 자바스크립트 코드와 Android 코드 간에 결합을 해주기 위해 결합할 클래스 인스턴스와
// 자바스크립트가 클래스 엑세스를 위해 호출할 수 있는 인터페이스 이름에 전달.
webView.addJavascriptInterface(AndroidBridge(), "Android")

 

 

 

 

 

 

 

 

 

 

 

(3). Javascript안에서 호출

funtion callJavaAndroid() {
  window.Android.callAndroid();
}

 

 

 

 

 

 

 

함수 내에서 알 수 있는 것은

 

(1) : fun callAndroid() 

(2) : webView.addJavascriptInterface(AndroidBridge(), "Android")

(3) : window.Android.callAndroid();   

 -> Javascript에서 호출 할 때, 정해진 함수명과 AndroidBridge를 연결해주는 이름을 잘 사용해야 한다.

 

 

 

 

 

 

 

 

2. 앱에서 웹을 호출

 

1과 동일한 세팅을 해주고

 

1-(2) 에서 webView.loadUrl("javascript:callJavaAndroid()")를 추가해준다.

loadUrl에서 자바스크립트 함수를 호출해주면 앱에서 웹에 있는 함수를 호출해줌.

val webView: WebView = findViewById(R.id.webview)
webView.settings.javaScriptEnabled = true
webView.loadUrl("https://www.naver.com/")

// 1-(2)와 다른 부분
// javascript의 함수를 호출해 주는 부분이다.
webView.loadUrl("javascript:callJavaAndroid()")

webView.addJavascriptInterface(AndroidBridge(), "Android")

 

 

 

1-(3) 에 있는 Javascript 함수 callJavaAndroid()를  안드로이드 webView.loadUrl("javascript:callJavaAndroid()")을 통해 가져오는 것을 알 수 있다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고

 

 

웹 -> 앱

https://come2misun.tistory.com/274

Javascript에서 Android 함수 호출하기

https://rongscodinghistory.tistory.com/28

스프링과 안드로이드 연동5 : (Javascript에서 Android 함수 호출하기)

 

 

 

앱->웹

http://it-archives.com/222097630580/

[Android] 안드로이드에서 javascript(js) 함수 호출 – 흑곰의 유익한 블로그 2호점

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=ninace&logNo=80209574661 

안드로이드에서 자바스크립트 호출하기, 자바스크립트에서 안드로이드 호출하기.

 

 

 

 

 

 

 

 

 

- webView - Javascript 공식 site 참고

https://developer.android.com/guide/webapps/webview

WebView에서 웹 앱 빌드  |  Web Apps  |  Android Developers