1、HTML页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
var i=0;
function clickFun(){
var str =document.getElementById("name").value;
document.getElementById("bt").value="Click Me"+i++;
//alert(str);
inJs.innerFun(str);//调用 java函数
}
function setName(name){
document.getElementById("name").value=name;//等java 调用,修改html元素
}
</script>
</head>
<body>
<input type="text" id="name">
<input type="button" id="bt" value="Click Me" onClick="clickFun()">
</body>
</html>
2、Activity
package com.example.app04;
import java.util.Random;
import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;
public class MainActivity extends Activity {
TextView tv;
WebView wv;
//
Handler handler=new Handler();
Random r =new Random();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tv = (TextView) findViewById(R.id.tv);
wv =(WebView) findViewById(R.id.webView1);
tv.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
handler.post(new Runnable() {
@Override
public void run() {
//调用JS中的 函数,当然也可以不传参
wv.loadUrl("javascript:setName('android产生的随机数:"+r.nextInt(100)+"')");
}
});
}
});
//
WebSettings setting =wv.getSettings();
setting.setJavaScriptEnabled(true); //运行js代码
//
wv.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
//将Android对象,转为 JS 可以 调用的 对象
wv.addJavascriptInterface(new InnerAndroid(), "inJs");
//加载本地 页面
wv.loadUrl("file:///android_asset/index.html");
}
//内部对象,修改界面
final class InnerAndroid{
@JavascriptInterface//api14以后必加
public void innerFun(final String str){
Log.i("Msg", "收到 参数 :"+str);
handler.post(new Runnable(){
@Override
public void run() {
tv.setText(str);
}
});
}
}
}
3、布局文件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<WebView
android:id="@+id/webView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignLeft="@+id/tv"
android:layout_below="@+id/tv" />
</RelativeLayout>
4、测试
js调用java,可以
java调用js,可以