首页 > 代码库 > Android与JavaScrip进行交互(一)

Android与JavaScrip进行交互(一)

一、JS代码如下

demo2.xml

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> 
	<title>veikr的博客 </title> 
	<meta name="generator" content="WordPress 3.5.1" /> 
	<meta name="wap-version" content="1.10 (2008.8.3)" /> 
	<link rel="alternate" type="application/rss+xml" title="veikr的博客 RSS Feed" href=http://www.mamicode.com/"http://veikr.com/feed" /> >
<pre name="code" class="html"><span style="white-space:pre">		</span>onClick="window.demo.clickButton()"<span style="font-family: Arial, Helvetica, sans-serif;">	</span>
onClick="test2()"/><input onClick="test()" type="button" id="testbtn2" value=http://www.mamicode.com/"我是按钮2"/><script language="javascript">function test(){ alert("点击了按钮2"); }function test2(){ alert("点击了按钮1"); }function wave() { alert("点击了andorid中的按钮");}</script>>
上面的按钮1设置了2个点击事件的方法,1个是android中的方法,1个是JS中的方法,但是点击事件只会响应一次。

       这里将android中的方法放在前面。在浏览器打开这个html文件,点击按钮1,响应事件从前往后查找,放在前面的是andoid中的方法,浏览器中自然找不到,所以不会响应;继续向后查找,第二个点击事件是JS中的方法,可以执行,所以予以响应。在app中运行,找到的第一个方法就是可执行的方法,所以予以响应,后面的点击事件方法虽然可以执行,但是由于点击事件已经响应了,所以不再执行。

二、实现功能

1.点击andorid中的按钮响应JS中的方法

2.点击JS中按钮响应Android中的方法

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/mCallJS"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CallJs" />

    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

MethodMutual2.java

package com.example.mutal;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;

public class MethodMutual2 extends Activity {

	private WebView mWebView;
	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/demo2.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 clickButton() {
			new AlertDialog.Builder(MethodMutual2.this).setMessage("你点击的是按钮2").create().show();
		}
	}

	/**
	 * 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) {
			// 自己拦截对话框处理
			// Toast.makeText(getApplicationContext(), message, 0).show();
			// result.confirm();
			// return true;
			// 使用js对话框
			return super.onJsAlert(view, url, message, result);
		}
	}
}
分析:

点击android按钮--响应JS中的wave()方法

点击按钮1--android app中响应clickButton()方法;浏览器中响应JS中的test2()方法

点击按钮2-响应JS中的test()方法

Android与JavaScrip进行交互(一)