'교류'에 해당되는 글 1

  1. 2014.04.09 WebView를 이용해 javascript와 통신하기 1
Android/View | Posted by 덩치 2014. 4. 9. 16:13

WebView를 이용해 javascript와 통신하기

펌 OK (출처 표시), 상업적 이용 NO, 컨텐츠 변경 NO


시작하기 전 주의점 : 빌드타겟 ~16 에서는 정상적으로 작동,

타겟 17이상부터는 호출되는 메소드에 @JavascriptInterface 어노테이션을 반드시 추가 해 주어야함


WebView로 띄운 페이지와 App간에 메시지를 주고 받는 방법에 대해 알아보자.


우선 웹뷰를 생성한다.

WebView mWebView ;

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


그리고  웹뷰의 세팅을 자바스크립트를 사용가능하도록 선언한다 (default : false)

mWebView.getSettings().setJavaScriptEnabled(true);


그리고 자바스크립트로부터 데이터를 전달받을 클래스를 생성 해 준다.


private class AndroidBridge {

    public void setMessage(final String arg) {

    handler.post(new Runnable() {

    public void run() {

    mTextView.setText("받은 메시지 : \n" + arg);

    }

    });

    }

    }


자바스크립트에서 AndroidBridge라는 클래스로 메시지를 보내 줄 수 있게 하기 위해서 다음과 같이 선언한다.

mWebView.addJavascriptInterface(new AndroidBridge(), "android");

이제 자바스크립트에서는 AndroidBridge()에 "android"라는 이름으로 접근할 수 있게 되었다.


그리고 웹뷰에 표시할 url을 셋팅 해 준다.

mWebView.loadUrl("file:///android_asset/javapage.html");


자바스크립트 파일 : 

본인은 프로젝트의 assets 폴더javapage.html 이라는 로컬파일을 만들어서 넣고 해당 경로를 선언했다.

첨부 : 

javapage.html

파일 안의 내용은

<html>

<head>

<script language="JavaScript">

function setMessage(arg) {

 document.getElementById('textMessageFromApp').innerHTML = arg;

function sendMessage(msg){

window.android.setMessage(msg);

}

</script>

<style>

input {

position:absolute; top:100%; margin-top:-80px;

}

</style>

</head>

<body>

<hr/>

<h2>WebView와의 통신</h2>

<hr/>

<br/>

받은 메시지 :

<p id="textMessageFromApp" style="height:200px; overflow-y:auto;"> 

</p>

<hr/>

<input type="text" id="textMessageToApp"  value="App으로 전송"/>

<input type="button" value="Send Message" onclick="sendMessage(document.getElementById('textMessageToApp').value)" style="left:50%;"/>

</body>

</html>


중요한부분은 녹색으로 표시 했고,

자세한건 나머지 소스를 보면서 설명하겠다.


App - > 자바스크립트로 메시지 전달 :


아래 소스코드는 에디트텍스트에 적은 내용을 웹뷰로 날려주는것인데, 버튼클릭리스너 등에서 사용한다.

mWebView.loadUrl("javascript:setMessage('" + mEditText.getText() + "')");


이렇게 메시지를(mEditText.getText() 를 javascript:setMessage( ); 에 날려주게되면,

javapage.html 파일의 setMessage 부분에 arg로 값이 전달된다.


html파일에서는 arg로 값을 받아서 textMessageFromApp이라는 텍스트뷰에 표시해 주고 있다.


자바스크립트 - > App으로 메시지 전달 :

페이지의 버튼을 클릭하면 onclick 안의 내용이 실행되면서 textMessageToApp 텍스트뷰의 내용이

sendMessage를 통해 전달된다. sendMessage 부분을 보면


window.android.setMessage(msg);

이렇게 돼 있는데, 아까전에 위에서

mWebView.addJavascriptInterface(new AndroidBridge(), "android");

라고 인터페이스를 추가한 것을 기억해 보면 초록색 소스코드가 이해될것이다.

자바스크립트에서 android라는 이름으로 setMessage를 해 주는 것이다.


이렇게 되면 안드로이드의 AndroidBridge클래스에서 메시지를 받아서 텍스트뷰의 내용을

자바스크립트에서 보낸 msg로 출력된다.



이상으로 안드로이드와 자바스크립트간의 양방향 메시지 전달 방법에 대해 알아보았다.


예제 프로젝트 :

WebView_Javascript.zip


(참조 : http://blog.daum.net/kwh4865/13153880)