[Android/WebView] 안드로이드에서 WebView의 함수 호출하기

WebView 설정

---

먼저 assets/web 폴더 안에 있는 index.html을 불러온다.

 

val url = "file:///android_asset/web/index.html"
binding.webView.loadUrl(url)

그 다음 웹페이지의 JavaScript 기능을 사용하기 위해 다음과 같은 설정 코드를 넣어준다.

binding.webView.settings.javaScriptEnabled = true

 

 

JavaScript 호출하기

---

기본적으로 JavaScript를 호출할 때에는 WebView.loadUrl(String) 함수를 이용하고

다음과 같은 형태로 사용한다.

// 함수 호출
binding.webView.loadUrl("javascript:sum(1,2)")
binding.webView.loadUrl("javascript:number.sum(1,2)") // 참조변수 접근
binding.webView.loadUrl("javascript:(new Number()).sum(1,2)") // 익명객체 접근

// 변수 선언
binding.webView.loadUrl("javascript:const number = new Number()")

 

 

함수의 반환 값 얻기

---

해당 함수를 몰랐을 때에는 웹에서 작업 한 후 앱의 함수를 호출하게 구현 했었는데

WebView.evaluateJavaScript(String, ValueCallback<String>) 이라는 반환하는 함수가 있었다.

 

해당 함수를 사용하면서 반환값을 알 필요가 없는 경우에는 ValueCallback에 null을 넣을 수 있고

어떤 값이든 반환은 String으로 넘어온다.

// 반환 값이 필요 없는 경우
evaluateJavascript("javascript:sum(1,2)", null)

// 반환 값이 필요한 경우
evaluateJavascript("javascript:sum(1,2)") { value ->
    // handle value
}

 

 

확장 함수 사용하기

---

실행할 script를 String째로 넘기다보니 함수의 스펙만 보고 작성하는게 아니라

문자열로 만들어서 타이핑하는게 불편하다고 생각해서

스펙만 보고 선언적으로 작성할 수 있게 확장 함수로 만들었다.

// calculator.sum(a, b)
binding.webView.executeScript(
    references = listOf("calculator"),
    functionName = "sum",
    params = listOf(a, b)
) { value ->
    Log.d("TAG", value)
}

// sum(a, b)
binding.webView.executeScript(
    functionName = "sum",
    params = listOf(a, b)
) { value ->
    Log.d("TAG", value)
}

// reset(), no return
binding.webView.executeScript(
    functionName = "reset"
)

// const calculator = new Calculator()
binding.webView.executeScript(
    variableName = "calculator",
    constructorName = "Calculator"
)

 

// 변수 선언
fun WebView.executeScript(
    variableName: String,
    constructorName: String,
    params: List<Any> = emptyList(),
    onResult: (value: String) -> Unit = {}
) {
    val sb = StringBuilder()

    sb.append("javascript:")
        .append("const ")
        .append(variableName)
        .append(" = ")
        .append("new ")
        .append(constructorName)
        .append("(")
        .append(params.joinToString(", "))
        .append(")")

    evaluateJavascript(sb.toString(), onResult)
}

// 함수 호출
fun WebView.executeScript(
    references: List<String> = emptyList(),
    functionName: String,
    params: List<Any> = emptyList(),
    onResult: (value: String) -> Unit = {}
) {
    val sb = StringBuilder()

    sb.append("javascript:")
        .append(references.joinToString("."))
        .append(".")
        .append(functionName)
        .append("(")
        .append(params.joinToString(", "))
        .append(")")

    evaluateJavascript(sb.toString(), onResult)
}