一、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"
<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="我是按钮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. */
@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()方法
时间： 2024-10-19 09:58:41