Javascript interface

똘이주인·2021년 8월 9일
0

하이브리드 앱도 앱이기 때문에 웹 페이지로 구성이 되어있지만 앱의 기능을 어느 정도는 사용하게 됩니다. 그렇기 때문에 앱에서는 웹에서 어떠한 신호를 받기 위한 로직이 필요했으며, 그에 따라 생겨난 것이 Javascript를 통해 데이터를 주고받을 수 있도록 한, Android Bridge Interface

1. WebView(웹뷰) 세팅

<span style="font-size: 14pt;">
/ 웹뷰 위젯 연결
        webView1 = (WebView)findViewById(R.id.webView1);
        // 클리기 새창 안뜨게...
        webView1.setWebViewClient(new WebViewClient());
        // 세부 세팅객체 가져오기
        WebSettings mWebSettings = webView1.getSettings();
        // 자바스크립트 사용 허용
        // 웹뷰 내에서 자바스크립트 실행해 자바스크립트에서 안드로이드 함수
        // 실행시킬려면 필수로 세팅필요
        mWebSettings.setJavaScriptEnabled(true);
        // 안드로이드에서 제공하는 줌 아이콘을 사용할 수 있도록 설정
        mWebSettings.setBuiltInZoomControls(true);
        // 캐시 사용 여부 설정
        mWebSettings.setAppCacheEnabled(false);
 
        // 로드할 주소를 입력
        webView1.loadUrl("http://192.168.0.8:8080/");
</span>

2. 자바스크립트에서 호출시 수행할 안드로이드 메서드를 작성

자바스크립트와 안드로이드를 중간에서 인터페이스 역할을 할 클래스를 작성해서 그 내부에
메서드를 정의

// 인터넷 작업 해야함

<!-- manifest에 인터넷 접속 권한 추가 -->
<uses-permission android:name="android.permission.INTERNET" />

네트워크 작업은 백그라운드 쓰레드로 해야하며, 백그라운드 쓰레드에서는 메인 뷰의 화면 제어를 할 수 없음으로handler에게 대신해달라고 요청을 해야한다.
앞에선 계속 그렇게 해왔는데 이 2가지를 한번에 하는 것이 handler.post(new Runnable(){ run() }) 을 이용한 방식이다. 이런식으로해서 JavascriptInterface 클래스를 만들도록 한다.

public class WebViewActivityextends AppCompatActivity {
 
    WebView webView1;
    Handler handler =new Handler();
    TextView textView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);
 
        // 웹뷰 위젯 연결
        webView1 = (WebView)findViewById(R.id.webView1);
        // 클리기 새창 안뜨게...
        webView1.setWebViewClient(new WebViewClient());
        // 세부 세팅객체 가져오기
        WebSettings mWebSettings = webView1.getSettings();
        // 자바스크립트 사용 허용
        // 웹뷰 내에서 자바스크립트 실행해 자바스크립트에서 안드로이드 함수
        // 실행시킬려면 필수로 세팅필요
        mWebSettings.setJavaScriptEnabled(true);
        // 안드로이드에서 제공하는 줌 아이콘을 사용할 수 있도록 설정
        mWebSettings.setBuiltInZoomControls(true);
        // 캐시 사용 여부 설정
        mWebSettings.setAppCacheEnabled(false);
 
        // 로드할 주소를 입력
        webView1.loadUrl("http://192.168.0.8:8080/");
 
        // 텍스트 뷰 위젯 연결
        textView = (TextView)findViewById(R.id.textView);
 
    }
 
    final class JavascriptInterface {
        @android.webkit.JavascriptInterface // 최근에는 이 어노테이션을 붙여줘야 동작하게 되어 있다
        public void callMethodName(final String str){// 반드시 final이어야 한다.
            // 네트워크를 통한 작업임으로 백그라운드 스레드를 써서 작업해야한다.
            // 또한, 백그라운드 스레드는 직접 메인 뷰에 접근해 제어할 수 없음으로
            // 핸들러를 통해서 작업해야하는데
            // 이 때문에 한번에 handler.post()를 통해서 내부에 Runnable을 구현해 작업한다.
            handler.post(new Runnable() {
                @Override
                public void run() {
                    // handle를 통해서 화면에 접근하는 것임으로 가능함
                    textView.setText("자바스크립트에서 전달받은 문자열을 쓴다 : " + str);
                }
            });
        }
    }
 
}

3. 만들어준 JavascriptInterface 클래스를 웹뷰에 등록

<span style="font-size: 14pt;"> 
		webView1.addJavascriptInterface(new JavascriptInterface(),"myJSInterfaceName");
</span>

webView1.addJavascriptInterface(new JavascriptInterface(),"myJSInterfaceName"); 에서
두번째 매개변수란에 myJSInterfaceName 처럼 인터페이스 이름을 지정하게 되어 있는데,
이 이름을 이용해서 자바스크립트에서 호출

0개의 댓글