08. [안드로이드/java] 웹뷰 안드로이드 <-> 자바스크립트 함수 호출(javascriptInterface 기능)

Android Studio/java

08. [안드로이드/java] 웹뷰 안드로이드 <-> 자바스크립트 함수 호출(javascriptInterface 기능)

drizzle0925 2021. 7. 6. 18:28

728x90

하이브리드 앱을 개발하다 보면 안드로이드에서 웹의 자바스크립트를 호출하거나 반대로 웹에서 안드로이드의 함수를 호출하고 싶은 경우가 발생합니다. 이럴 때 유용하게 사용할 수 있는 기능이 javascriptInterface기능입니다.

오늘은 이 기능의 예제코드를 작성해보겠습니다.

Web -> Android 호출

1. JavaScript 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Web -> Android 함수호출</h1>
    <script>
        //web -> android 호출
        function callAndroid(){
            window.Android.openAlert("web에서 호출한 메세지입니다.");
        }
        callAndroid();
    </script>
</body>
</html>

2. Android studio 코드 작성

핸들러 전역변수 추가

// Bridge handler 추가
private final Handler handler = new Handler();

OnCreate 내부에 브리지 명칭 추가

// Bridge 명칭 추가
mWebView.addJavascriptInterface(new AndroidBridge(), "Android");

OnCreate 외부에서 Web에서 호출할 함수 추가

private class AndroidBridge {
        @JavascriptInterface
        public void openAlert(String arg){
            handler.post(new Runnable(){
                @Override
                public void run(){
                    Toast.makeText(MainActivity.this, arg, Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

MainActivity.java 최종 소스 코드

package com.drizzle.webview2;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.content.DialogInterface;
import android.os.Bundle;
import android.os.Handler;
import android.view.KeyEvent;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;
    // Bridge handler 추가
    private final Handler handler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.activity_main_webview);

        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        // Bridge 명칭 추가
        mWebView.addJavascriptInterface(new AndroidBridge(), "Android");

        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                new AlertDialog.Builder(view.getContext())
                        .setTitle("Alert")
                        .setMessage(message)
                        .setPositiveButton(android.R.string.ok,
                                new AlertDialog.OnClickListener() {
                                    public void onClick(DialogInterface dialog, int which) {
                                        result.confirm();
                                    }
                                })
                        .setCancelable(false)
                        .create()
                        .show();
                return true;
            }

            @Override
            public boolean onJsConfirm(WebView view, String url, String message,
                                       final JsResult result) {
                new AlertDialog.Builder(view.getContext())
                        .setTitle("Confirm")
                        .setMessage(message)
                        .setPositiveButton("Yes",
                                new AlertDialog.OnClickListener() {
                                    public void onClick(DialogInterface dialog, int which) {
                                        result.confirm();
                                    }
                                })
                        .setNegativeButton("No",
                                new AlertDialog.OnClickListener() {
                                    public void onClick(DialogInterface dialog, int which) {
                                        result.cancel();
                                    }
                                })
                        .setCancelable(false)
                        .create()
                        .show();
                return true;
            }
        });

        mWebView.loadUrl("http://example.com/");
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (mWebView.canGoBack()) {
                mWebView.goBack();
                return false;
            }
        }

        return super.onKeyDown(keyCode, event);
    }

    private class AndroidBridge {
        @JavascriptInterface
        public void openAlert(String arg){
            handler.post(new Runnable(){
                @Override
                public void run(){
                    Toast.makeText(MainActivity.this, arg, Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
}

결과 화면

앱을 실행하면 Toast 메시지가 바로 표시됩니다.

Android -> Web 호출

1. JavaScript 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Web -> Android 함수호출</h1>
    <script>
        //web -> android 호출
        function callAndroid(){
            window.Android.openAlert("web에서 호출한 메세지입니다.");
        }
        callAndroid();

        // android -> web 호출
        function callWeb(message){
            alert(message);
        }
    </script>
</body>
</html>

2. Android studio > MainActivity.java 코드 작성

openAlert 함수 아래 아래 코드 추가

mWebView.loadUrl("javascript:callWeb('안드로이드에서 웹 함수 호출')");

결과 화면

앱이 실행되면

1) JavaScript -> Android 함수 호출

2) Android -> JavaScript 함수 호출

방식으로 호출되면서 아래 화면과 같이 동작합니다.

728x90