펌 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)
'Android > View' 카테고리의 다른 글
| TextView에 marquee 적용하기 (0) | 2014.04.24 |
|---|---|
| 간단한 얼럿다이얼로그 출력 (0) | 2014.04.15 |
| 나인패치 (9patch) 이미지 만드는 방법 (1) | 2014.04.03 |
| 레이아웃의 종류와 사용법 (3) | 2014.02.04 |
| SurfaceView 구현 / 사용법 (0) | 2013.12.24 |