android webview, javascript 통신

android webview, javascript 통신

1. 브릿지 만들기.

별것은 없다. 실제 안드로이드와 연동동작을 할 클래스들을 따로 모아두었다 생각하면된다. 다만 클래스 중 javascript에서 호출될 메소드는 @JavascriptInterface 어노테이션을 붙혀주면된다. 아래는 예제 소스다. (로그를 적어주는 메소드).

public class AndroidBridge {

    private String TAG = "AndroidBridge";

    // 로그를 띄우는 메소드 입니다.
    @JavascriptInterface
    public void call_log( final String _message ){

        Log.d(TAG, _message);

    }


}

2. 브릿지 셋팅하기.

MainActivity 클래스,  onCreate 메소드 적당한 곳에, 적당히 셋팅해 주면된다. (그냥 클래스를 생성하고, 셋팅하는 것 뿐이다.)

AndroidBridge ab = new AndroidBridge(wv, MainActivity.this );
wv.addJavascriptInterface( ab, "Android" );

셋팅하는 addJavascriptInterface 메소드의 첫 인자는 브릿지 클래스를 바탕으로 생성한 객체, 2번째는 javascript의 어떤 객체속에 인터페이스 메소드들을 넣어줄까를 결정하는 값이다. 아래 호출 부분을 보면 쉽게 이해가 가리라 생각된다.

3. javascript 호출부분.

그냥 호출하면된다. 아래와 같이.

<javascript>

   window.Android.call_log('원하는 메시지');

</javascript>

4. 안드로이드 에서 javascript로 메시지 보내기.

웹의 a 태그 href 에서 javascript를 실행할 때, <a href="javascript:alert('안녕');"> 등의 방법으로 간단히 자바 스크립트를 실행할 수 있을 것이다. 똑 같이  webview.loadUrl("javascript:alert('안녕');") 이라고 전달해 준다면, 똑 같은 동작을 한다.
다만, Webview와 Android는 비동기 상태 이므로 쓰레드로 넣어전달해 주어야 한다.

주의 할점. Handler를 넣으려고 하면, 자동완성 순서상,  import java.util.logging.Handler 가 등록되며, 되지 않을 수 있다. 꼭, import android.os.Handler를 포함시키자.

javascript 속 메소드를 호출하는 코드가 있는, 클래스에 아래와 같이 Handler를 추가해 주도록 합니다.

final public Handler handler = new Handler();

그리고 적당한 곳에 아래와 같이 자바 스크립트 함수를 호출하면됩니다.

handler.post(new Runnable() {
    @Override
    public void run() {
        mAppView.loadUrl("javascript:alert('안녕')");
    }
});

5. 전체 소스

>> MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    private WebView wv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
//        Toolbar toolbar = findViewById(R.id.toolbar);
//        setSupportActionBar(toolbar);



        // 웹뷰 컨트롤러를 가지고 옵니다.
        wv=(WebView)findViewById(R.id.activity_main_webview);



        // 웹뷰에 자바 스크립트를 사용할 수 있게 허용.
        wv.getSettings().setJavaScriptEnabled(true);

        // 각종 알림 및 요청을 받게되는 WebViewClient를 설정합니다. (직접만든 웹뷰 클라이언트를 상속한 클래스 설정)
        wv.setWebViewClient(new CustomWebViewClient());

        // 크롬 핸들러 설정. 이 핸들러는 자바 스크립트 대화상자, favicon, 제목과 진행상황 처리에 사용하기 위해.
        // WebChromeClient를 구현한 것 입니다.
        wv.setWebChromeClient( new WebChromeClient());



        // 웹뷰에 첫 주소를 연결하도록 합니다.
        String first_addr = getString(R.string.first_addr);
        wv.loadUrl(first_addr);



//        FloatingActionButton fab = findViewById(R.id.fab);
//        fab.setOnClickListener(new View.OnClickListener() {
//            @Override
//            public void onClick(View view) {
//                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
//                        .setAction("Action", null).show();
//            }
//        });



        // Javascript 브릿지를 사용하도록 합니다.
        AndroidBridge ab = new AndroidBridge(wv, MainActivity.this );
        wv.addJavascriptInterface( ab, "Android" );


    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);




        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

>> AndroidBridge.java

import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;

import android.os.Handler;


public class AndroidBridge {

    private String TAG = "AndroidBridge";
    final public Handler handler = new Handler();

    // 새성시 내부적으로 사용할 코드들을 저장합니다.
    private WebView mAppView;
    private MainActivity mContext;

    // 기본 생성자 입니다.
    public AndroidBridge(WebView _mAppView, MainActivity _mContext)
    {

        // 입력받은 값들을 저장하도록 합니다.
        mAppView = _mAppView;
        mContext = _mContext;

    }

    // 로그를 띄우는 메소드 입니다.
    @JavascriptInterface
    public void call_log( final String _message ){

        Log.d(TAG, _message);

        handler.post(new Runnable() {
            @Override
            public void run() {
                mAppView.loadUrl("javascript:alert('["+ _message +"] 라고 로그를 남겼습니다.')");
            }
        });



    }


}

>> 웹페이지 파일.

<html>

<head>

<title>일단 웹뷰</title>

</head>

<body>

일단 웹뷰를 표시하도록 합니다.!!!

<a href="javascript:location.reload(true);">새로고침</a>

<a href="javascript:window.Android.call_log('연동테스트');">연동</a>

</body>

</html>

그럼.. 이만..