android 和 js 之间简单的相互调用

来源：互联网发布：windows 平板电脑吧编辑：程序博客网时间：2024/06/05 06:14

android 中 java 代码和 js 之间简单调用

涉及到的 android API

1, WebView

2, @JavascriptInterface

涉及到的方法：

WebView.getSettings().setJavascriptEnabled();
WebView.loadUrl();
WebView.addJavascriptInterface();
annotation: @android.webkit.JavascriptInterface

准备 html 文件

首先在 AS 工程对应的 module 下的 assets 资产目录中新建 index.html 文件并添加以下内容：

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>android js communication</title>    <script type="text/javascript">        // java 调用 js 代码，修改 span 标签内容        function js2Java() {            document.getElementById('eSpan').innerHTML = 'java call js';        }        function js2JavaWithSth(url) {            document.getElementById('eSpan').innerHTML = 'java call js with "' + url + '"';        }        // 弹出吐司        function showToast() {            window.jsInterface.showToast();        }        // html 页面携带内容，并弹出吐司        function showToastWithContent(url){            window.jsInterface.showUrl(url);        }    </script></head><body>    <h1>android and javascript communication</h1>    <button onclick="showToast()">call java</button>    <button onclick="showToastWithContent('http://192.168.1.103:8089/_index.html')">        call java with url</button>    <br>    <span id="eSpan" style="color: red;"></span> <br></body></html>

布局文件比较简单，不贴出来了

在 MainActivity.java 中调用相关的 API

private WebView mWebView;@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.main);    // 初始化 WebView    mWebView = (WebView) findViewById(R.id.webview);    // 开启 javascript    mWebView.getSettings().setJavaScriptEnabled(true);    // 加载url，引用 assets/index.html 文件    mWebView.loadUrl("file:///android_asset/index.html");    // 添加 javascript 接口，以便 js 调用 java API    mWebView.addJavascriptInterface(new JavascriptInterface(), "jsInterface");    findViewById(R.id.btn_call_js).setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View v) {            // 调用 js 代码            mWebView.loadUrl("javascript:js2Java()");        }    });    findViewById(R.id.btn_call_js_with_sth).setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View v) {            // 调用 js 代码            mWebView.loadUrl("javascript:js2JavaWithSth(" + "'a string from java'" + ")");        }    });}/* js 调用 java代码 */private class JavascriptInterface {    /*只有添加了 JavascriptInterface 注解的方法才可以被 js 代码所调用*/    @android.webkit.JavascriptInterface    public void showToast() {        Toast.makeText(MainActivity.this, "hello js", Toast.LENGTH_SHORT).show();    }    /*只有添加了 JavascriptInterface 注解的方法才可以被 js 代码所调用*/    @android.webkit.JavascriptInterface    public void showUrl(final String url) {        Toast.makeText(MainActivity.this, url, Toast.LENGTH_SHORT).show();    }}

放上一张效果图

后记：

注意：

初始化 WebView –> 开启 javascript –> 加载 ulr –>添加 javascript 接口这个顺序最好不要错乱，否则可能达不到预期的效果。
其中涉及到部分 html 以及 css 知识，在此不做详细描述，有兴趣的朋友可以自行研究。

阅读全文

0 0