By

文章目录
  1. 1. 示例
  1. 开启WebView的JS支持
1
webView.getSettings().setJavaScriptEnabled(true);
  1. 对WebView进行JavascriptInterface绑定，JS脚本通过这个借口来调用Java代码
1
2
//	this为借口对象，第二个参数为JS中改参数的别名
webView.addJavascriptInterface(this,"zoe");
  1. Java中调用JS
1
2
// 调用JS的test函数并传参"test"
webView.loadUrl("javascript:test('"+test+"')");
  1. js中调用Java函数
1
<div id='b'><a onclick="window.zoe.onClick">b.c</a></div>

示例

layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?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" >

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

   
    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="调用js无参函数" />
    <Button
        android:id="@+id/button2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="调用js有参函数" />
	
</LinearLayout>

activity

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
public class MainActivity extends Activity {
	
	private WebView contentView = null;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		contentView = (WebView)findViewById(R.id.webview);
		contentView.getSettings().setJavaScriptEnabled(true);
		contentView.loadUrl("file:///android_asset/web.html");
		contentView.addJavascriptInterface(this, "zoe");
		Button button1 = (Button)findViewById(R.id.button1);
		Button button2 = (Button)findViewById(R.id.button2);
		button1.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				contentView.loadUrl("javascript:fun1()");
			}
		});
		button2.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				contentView.loadUrl("javascript:fun2('参数')");
			}
		});
	}
	public void startFunction() {
		Toast.makeText(this, "js调用了java函数", Toast.LENGTH_SHORT).show();
		runOnUiThread(new Runnable() {
			@Override
			public void run() {

			}
		});
	}
	public void startFunction(final String str) {
		Toast.makeText(this, "js调用了java函数，并传参："+str, Toast.LENGTH_SHORT).show();
		runOnUiThread(new Runnable() {
			@Override
			public void run() {

			}
		});
	}
}

web.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<meta http-equiv="Content-Type"	content="text/html;charset=utf-8">
<script type="text/javascript">
function fun1(){
	 document.getElementById("content").innerHTML +=   
         "<br\>java调用了js函数fun1";
}

function fun2(arg){
	 document.getElementById("content").innerHTML +=   
         ("<br\>"+"java调用了js函数fun2，并传参："+arg);
}

</script>
</head>
<body>
HTML标题 <br/>
<a onClick="window.zoe.startFunction()">调用java函数</a><br/>
<a onClick="window.zoe.startFunction('hello java')">调用java函数并传递参数</a>
<br/>
<div id="content">这里是内容</div>
</body>
</html>


例子

文章目录
  1. 1. 示例