Android与JavaScrip进行交互（一）

来源：互联网发布：php 超全局变量编辑：程序博客网时间：2024/05/21 18:46

一、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://veikr.com/feed" /> <link rel="pingback" href="http://veikr.com/xmlrpc.php" /> <link rel="shortcut icon" href="http://veikr.com/wp-content/themes/twentyten/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="wap.css" type="text/css" media="all" /> </head><body><input type="button" id="testbtn" value="我是按钮1" onClick="window.demo.clickButton()"onClick="test2()"/><input onClick="test()" type="button" id="testbtn2" value="我是按钮2"/></body><script language="javascript">function test(){ alert("点击了按钮2"); }function test2(){ alert("点击了按钮1"); }function wave() { alert("点击了andorid中的按钮");}</script> </html>

上面的按钮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. */@Overridepublic 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() {@Overridepublic 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 {@Overridepublic 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()方法

1 0