WebView with JS Interface
Android 의 WebView에서 Javascript 인터페이스를 사용하여 Java와 Javascript 간의 호출 예
WebView에서 자바스크립트의 alert() 함수를 구현하는 방법도 소개함
AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.androidapp" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="15" /> <uses-permission android:name="android.permission.INTERNET"/> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:configChanges="orientation" android:label="@string/title_activity_main" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rootLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="onBtnLeft" android:text="<<" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="onBtnRight" android:text=">>" /> </LinearLayout> <WebView android:id="@+id/webView1" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
http://211.183.2.80:8080/WebApp/hello.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> <title>안녕하세요?</title> <script type="text/javascript"> var num = 0; function test() { var name = "Smith"; alert('안녕하세요? ' + name); } function changeImage() { document.getElementById("mountain").src = 'images/mt05.jpg'; } function showLeftImage() { // Activity에서 호출할 함수 num--; if(num<1) num=6; document.getElementById("mountain").src = 'images/mt0'+num+'.jpg'; } function showRightImage() { // Activity에서 호출할 함수 num++; if(num>6) num=1; document.getElementById("mountain").src = 'images/mt0'+num+'.jpg'; } </script> </head> <body> <div align="center"> 안녕하세요?<p/> <input type="button" value="자바스크립트 실행" onClick="javascript:test(); "/> <p/> <img id="mountain" src="images/mt06.jpg" /><p/> <input type="button" value="이미지 변경" onClick="changeImage();" /> </div> </body> </html>
package com.example.androidapp; import android.os.Bundle; import android.app.*; import android.content.DialogInterface; import android.util.Log; import android.view.View; import android.webkit.JsResult; import android.webkit.WebChromeClient; import android.webkit.WebSettings; import android.webkit.WebView; public class MainActivity extends Activity { WebView webView; MyJSInterface myJSInterface; // 개발자 정의, 자바와 자바스크립트간의 인터페이스 역할을 하는 클래스 @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Log.i("onCreate", "onCreate실행됨"); webView = (WebView) findViewById(R.id.webView1); WebSettings webSettings = webView.getSettings(); webSettings.setSavePassword(false); webSettings.setSaveFormData(false); webSettings.setJavaScriptEnabled(true); webSettings.setSupportZoom(false); //webView.loadUrl("file:///android_asset/testhtml.html"); webView.loadUrl("http://211.183.2.80:8080/WebApp/hello.jsp"); webView.setWebChromeClient(new MyChromeClient()); myJSInterface = new MyJSInterface();
/* 아래의 메소드의 두번째 아규먼트는 객체의 이름에 해당하며 임의의 문자열이면 되고 Javascript에서는
* 이 이름을 이용하여 등록된 객체의 메소드를 호출하게 된다. */
webView.addJavascriptInterface(myJSInterface, "myJSInterface"); } public void onBtnLeft(View v) { myJSInterface.showLeftImage(); } public void onBtnRight(View v) { myJSInterface.showRightImage(); } /* Javascript의 onCloseWindow, onProgressChanged, onJsAlert, onJsConfirm, * onJsPrompt, onJsTimeOut 등의 이벤트처리를 담당하는 클래스 */ class MyChromeClient extends WebChromeClient { @Override public boolean onJsAlert(WebView view, String url, String message,final JsResult result) { /*Javascript에서 alert()함수가 사용될 때 자동으로 호출되는 콜백 메소드 * 안드로이드의 AlertDialog를 작성하여 보여주면 된다 */ new AlertDialog.Builder(MainActivity.this) .setTitle("JavaScript Alert !") .setMessage(message) .setPositiveButton(android.R.string.ok,/*CharSequence가능*/ new AlertDialog.OnClickListener() { public void onClick(DialogInterface dialog, int which) { result.confirm(); } }).create().show(); return true; } } final class MyJSInterface { // Javascript의 인터페이스 역할 클래스 MyJSInterface(){} void showLeftImage() { webView.loadUrl("javascript:showLeftImage()"); } void showRightImage() { webView.loadUrl("javascript:showRightImage()"); } } }