Java调用JavaScript
1.main.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?xml version=
"1.0"
encoding=
"utf-8"
?>
<LinearLayout xmlns:android=
"http://schemas.android.com/apk/res/android"
android:orientation=
"vertical"
android:layout_width=
"fill_parent"
android:layout_height=
"fill_parent"
>
<TextView
android:layout_width=
"fill_parent"
android:layout_height=
"wrap_content"
android:text=
"Welcome to Mr Wei's Blog."
/>
<WebView
android:id=
"@+id/webview"
android:layout_width=
"fill_parent"
android:layout_height=
"wrap_content"
/>
<Button
android:id=
"@+id/button"
android:layout_width=
"fill_parent"
android:layout_height=
"wrap_content"
android:text=
"Change the webview content"
/>
</LinearLayout>
|
2.demo.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<
html
>
<
mce:script
language="javascript">
<!--
function fillContent(){
document.getElementById("content").innerHTML =
"This Content is showed by Android invoke Javascript function.";
}
// -->
</
mce:script
>
<
body
>
<
p
><
a
onClick="window.demo.startMap()" href="">Start GoogleMap</
a
></
p
>
<
p
id="content"></
p
>
<
p
>A Demo ----Android and Javascript invoke each other.</
p
>
<
p
>Author:Frankiewei</
p
>
</
body
>
</
html
>
|
3.WebViewDemo.java
|
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
|
package
com.tutor.webwiewdemo;
import
android.app.Activity;
import
android.content.ComponentName;
import
android.content.Intent;
import
android.os.Bundle;
import
android.view.View;
import
android.webkit.WebSettings;
import
android.webkit.WebView;
import
android.widget.Button;
public
class
WebViewDemo
extends
Activity {
private
WebView mWebView;
private
Button mButton;
public
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.main);
setupViews();
}
//初始化
private
void
setupViews() {
mWebView = (WebView) findViewById(R.id.webview);
WebSettings mWebSettings = mWebView.getSettings();
//加上这句话才能使用javascript方法
mWebSettings.setJavaScriptEnabled(
true
);
//增加接口方法,让html页面调用
mWebView.addJavascriptInterface(
new
Object() {
//这里我定义了一个打开地图应用的方法
public
void
startMap() {
Intent mIntent =
new
Intent();
ComponentName component =
new
ComponentName(
"com.google.android.apps.maps"
,
"com.google.android.maps.MapsActivity"
);
mIntent.setComponent(component);
startActivity(mIntent);
}
},
"demo"
);
//加载页面
mWebView.loadUrl(
"file:///android_asset/demo.html"
);
mButton = (Button) findViewById(R.id.button);
//给button添加事件响应,执行JavaScript的fillContent()方法
mButton.setOnClickListener(
new
Button.OnClickListener() {
public
void
onClick(View v) {
mWebView.loadUrl(
"javascript:fillContent()"
);
}
});
}
}
|
首界面 点击按钮时,html内容改变
MainActivity.java
|
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
|
package
com.example.jsdemo;
import
android.os.Bundle;
import
android.support.v7.app.AppCompatActivity;
import
android.webkit.WebSettings;
import
android.webkit.WebView;
public
class
MainActivity
extends
AppCompatActivity {
private
WebView wView;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wView = (WebView) findViewById(R.id.wView);
wView.loadUrl(
"file:///android_asset/demo1.html"
);
WebSettings webSettings = wView.getSettings();
//①设置WebView允许调用js
webSettings.setJavaScriptEnabled(
true
);
webSettings.setDefaultTextEncodingName(
"UTF-8"
);
//②设置支持js调用java
wView.addJavascriptInterface(
new
AndroidAndJSInterface(),
"Android"
");
}
class
AndroidAndJSInterface{
@JavascriptInterface
public
void
showToast(){
Toast.makeText(MainActivity.
this
,
"我被js调用了"
, Toast.LENGTH_SHORT).show();
}
}
}
|
注意:解决该WebView.addJavascriptInterface接口不起作用的两种办法
①针对版本改成16
②在JavaScript接口类的方法加上@JavascriptInterface注解
2.JavaScript调用Java对象示例
demo1.html
|
1
|
<input type=
"button"
value=
"点击Android被调用"
onclick=
"window.Android.showToast()"
/>
|