WebView使用总结3(应用函数与JS函数互相调用)

edison_cool911

浏览: 1223120 次
性别:
来自: 荆州

最近访客更多访客>>

Newzq

离别的忧伤111

a90120411

atianchen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Android组件学习

JavaScript Android UI XML thread

完成java文件:

public class MethodMutual extends Activity {

	private WebView mWebView;
	private Handler mHandler = new Handler();
	private static final String LOG_TAG = "WebViewDemo";

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		loadAssetHtml();
	}

	public void loadAssetHtml() {
		mWebView = (WebView) findViewById(R.id.webview);
		WebSettings webSettings = mWebView.getSettings();
		webSettings.setSavePassword(false);
		webSettings.setSaveFormData(false);
		webSettings.setJavaScriptEnabled(true);
		webSettings.setSupportZoom(false);
		mWebView.setWebChromeClient(new MyWebChromeClient());
		// 将一个java对象绑定到一个javascript对象中,javascript对象名就是interfaceName,作用域是Global.
		mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
		mWebView.loadUrl("file:///android_asset/demo.html");
		// 通过应用中按钮点击触发JS函数响应
		Button mCallJS = (Button) findViewById(R.id.mCallJS);
		mCallJS.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				mWebView.loadUrl("javascript:wave()");
			}
		});
	}

	private int i = 0;

	final class DemoJavaScriptInterface {
		DemoJavaScriptInterface() {
		}
		/**
		 * This is not called on the UI thread. Post a runnable to invoke
		 * loadUrl on the UI thread.
		 */
		public void callAndroid() {
			mHandler.post(new Runnable() {
				public void run() {
					if (i % 2 == 0) {
						mWebView.loadUrl("javascript:wave()");
					} else {
						mWebView.loadUrl("javascript:waveBack()");
					}
					i++;
				}
			});
		}
	}

	/**
	 * Provides a hook for calling "alert" from javascript. Useful for debugging
	 * your javascript.
	 */
	final class MyWebChromeClient extends WebChromeClient {
		@Override
		public boolean onJsAlert(WebView view, String url, String message,
				JsResult result) {
			Log.d(LOG_TAG, message);
			result.confirm();
			return true;
		}
	}
}

main.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<Button android:layout_width="wrap_content" android:text="CallJs"
		android:layout_height="wrap_content" android:id="@+id/mCallJS" />
	<WebView android:id="@+id/webview" android:layout_width="fill_parent"
		android:layout_height="fill_parent" />
</LinearLayout>

demo.html:

<html>
	<script language="javascript">
	    /* This function is invoked by the activity */
		function wave() {
		    alert("1");
			document.getElementById("droid").src="android_waving.png";
			alert("2");
		}
		 /* This function is invoked by the activity */
		function waveBack() {
		    alert("1");
			document.getElementById("droid").src="android_normal.png";
			alert("2");
		}
	</script>
	<body>
	    <!-- Calls into the javascript interface for the activity -->
	    <a onClick="window.demo.callAndroid()"><div style="width:80px;
			margin:0px auto;
			padding:10px;
			text-align:center;
			border:2px solid #202020;" >
				<img id="droid" src="android_normal.png"/><br>
				Click me!
		</div></a>
	</body>
</html>

还有用到的2张机器人图片: