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()" />