Android与Javascript交互

发表于 |

转载请说明出处！
作者：kqw攻城狮
出处：个人站 | CSDN

本篇参考Android与HTML+JS交互入门

效果图

效果图

加载本地Html

1
2
3
contentWebView = (WebView) findViewById(R.id.webview);
// 加载Assets下的Html
contentWebView.loadUrl("file:///android_asset/html/test.html");

启用Javascript

1
2
contentWebView.getSettings().setJavaScriptEnabled(true);
contentWebView.addJavascriptInterface(this, "android");

Android调用Javascript的方法

Javascript写法

1
2
3
4
5
6
7
8
<script type="text/javascript">
    function jsFunction(){
         document.getElementById("content").innerHTML = "JS方法被调用";
    }
    function jsFunctionArg(arg){
         document.getElementById("content").innerHTML = "JS方法被调用并收到参数：<br/>" + arg;
    }
</script>

Android写法

1
2
3
4
// 调用JS的jsFunction方法
contentWebView.loadUrl("javascript:jsFunction()");
// 调用JS的jsFunctionArg方法
contentWebView.loadUrl("javascript:jsFunctionArg('[Android传递过来的数据]')");

Javascript调用Android的方法

Android方法

1
2
3
4
@JavascriptInterface
public void androidFunction() {
    Snackbar.make(contentWebView, "Android的方法被调用", Snackbar.LENGTH_SHORT).show();
}
1
2
3
4
@JavascriptInterface
public void androidFunction(String text) {
    Snackbar.make(contentWebView, "Android的方法被调用并收到参数 : \n" + text, Snackbar.LENGTH_SHORT).show();
}

Javascript调用

1
<input type="button" style="width:300px;height:50px;" value="JS调用Android方法" onclick="window.android.androidFunction()" />
1
<input type="button" style="width:300px;height:50px;" value="JS调用Android带有参数的方法" onclick="window.android.androidFunction('[JS传递过来的数据]')" />

Code

HTML

XML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
        <script type="text/javascript">
            function jsFunction(){
                 document.getElementById("content").innerHTML = "JS方法被调用";
            }
            function jsFunctionArg(arg){
                 document.getElementById("content").innerHTML = "JS方法被调用并收到参数：<br/>" + arg;
            }
        </script>
    </head>
    <body>
        <h1>HTML页面</h1>
        <hr/>
        <h3><div id="content">|</div></h3>
        <hr/>
        <input type="button" style="width:300px;height:50px;" value="JS调用Android方法" onclick="window.android.androidFunction()" />
        <br/>
        <input type="button" style="width:300px;height:50px;" value="JS调用Android带有参数的方法" onclick="window.android.androidFunction('[JS传递过来的数据]')" />
    </body>
</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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
package com.kongqw.kqwandroidjsdemo;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
public class MainActivity extends AppCompatActivity {
    private WebView contentWebView;
    @SuppressLint({"JavascriptInterface", "SetJavaScriptEnabled", "AddJavascriptInterface"})
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        contentWebView = (WebView) findViewById(R.id.webview);
        // 加载Assets下的Html
        contentWebView.loadUrl("file:///android_asset/html/test.html");
        // 启用Javascript
        contentWebView.getSettings().setJavaScriptEnabled(true);
        contentWebView.addJavascriptInterface(this, "android");
    }
    @JavascriptInterface
    public void androidFunction() {
        Snackbar.make(contentWebView, "Android的方法被调用", Snackbar.LENGTH_SHORT).show();
    }
    @JavascriptInterface
    public void androidFunction(String text) {
        Snackbar.make(contentWebView, "Android的方法被调用并收到参数 : \n" + text, Snackbar.LENGTH_SHORT).show();
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_js_function1) {
            // 调用JS的jsFunction方法
            contentWebView.loadUrl("javascript:jsFunction()");
            return true;
        } else if (id == R.id.action_js_function2) {
            // 调用JS的jsFunctionArg方法
            contentWebView.loadUrl("javascript:jsFunctionArg('[Android传递过来的数据]')");
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}
坚持原创技术分享，您的支持将鼓励我继续创作！