Android与JS的交互简单实现

来源：互联网发布：oracle数据库培训编辑：程序博客网时间：2024/05/22 02:02

Android与JS的交互简单实现

现在Android的势头慢慢已经趋向平稳.java的光辉岁月再一次燃烧(虽然java一直都是一颗常青树).Android为什么要使用js呢?如果一个webview都可以解决的问题,问什么还要写android代码?android从业人员会不会失业,这种担心确实有必要啊.不过还是要看看谷歌baba的态度哦!闲话不多说.开车.友情提示:车速40迈!

概述:

既然是Android与JavaScript的交互.心中可定有疑问.

1,js如何调用android的代码,准确来说应该是webview如何调用
2.android如何调用js的代码

第一:js调用android代码

1.首先来一段最最简单的jsp代码

 <body>    <p>WebView与Javascript交互</p>    <div>        <button onClick="window.android.actionFromJs()">点击调用Android代码</button>    </div>    <br />    <div>        <button onClick="window.android.actionFromJsWithParam(' data come from Js')">点击调用Android代码并传递参数</button>    </div>    <br />    <div id="log_msg">调用打印信息</div>    </body>1
2
3
4
5
6
7
8
9
10
11
12

等等,

不传递参数:    <button onClick="window.android.actionFromJs()">点击调用Android代码</button>    将参数传递到android代码中    <button onClick="window.android.actionFromJsWithParam('data come from Js')">点击调用Android代码并传递参数</button>1
2
3
4
5

onClick我懂,就是为button注册一个点击事件.可是window.android.actionFromJs()是什么鬼.其实actionFromJs()就是android代码中的一个普通方法.那么window.android又是什么东西:

如果我们想实现交互.还要对webview就行一些设置:

 // 启用javascript        mWebView.getSettings().setJavaScriptEnabled(true);     /** 为webview添加注册js 接口回调监听.         *         * 参数一: 接口对象         * 参数二: 接口别名(别名让js代码使用)         * 如果别名写"haha". 那么js中就要写window.haha.方法名         */        mWebView.addJavascriptInterface(this, "android");1
2
3
4
5
6
7
8
9
10

2.来看android怎么写

/**     * js调用此方法     */    @android.webkit.JavascriptInterface    public void actionFromJs() {        runOnUiThread(new Runnable() {            @Override            public void run() {                Toast.makeText(MainActivity.this, "js调用了Android函数", Toast.LENGTH_SHORT).show();                String text = logTextView.getText() + "\njs调用了Android函数";                logTextView.setText(text);            }        });    }    /**     * js调用此方法. 并且将参数传递过来     *     * @param str js  传递过来的参数     */    @android.webkit.JavascriptInterface    public void actionFromJsWithParam(final String str) {        runOnUiThread(new Runnable() {            @Override            public void run() {                Toast.makeText(MainActivity.this, "js调用了Android函数传递参数：" + str, Toast.LENGTH_SHORT).show();                String text = logTextView.getText() + "\njs调用了Android函数传递参数：" + str;                logTextView.setText(text);            }        });    }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

actionFromJs(),actionFromJsWithParam(final String str)方法就是我们在android代码中定义好的方法.以供js去调用.

注意: 要想让js调用必须在方法名上加注解

    @android.webkit.JavascriptInterface1
2

哦.js掉用android已经搞定

第二:android调用js代码

android调用js代码那就更加简单了.

首先我们肯定要有js代码:

<html>    <head>    <script type="text/javascript">    // 无参方法    function actionFromNative() {        document.getElementById("log_msg").innerHTML += "<br\>Android调用了js函数";    }    //有参方法    function actionFromNativeWithParam(arg) {        document.getElementById("log_msg").innerHTML += ("<br\>Android调用了js函数并传递参数：" + arg);    }    </script>    </head>    <body>    <div id="log_msg">调用打印信息</div>    </body>    </html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

其次:android代码调用方法

  /**         *  调用js.         *  WebView.loadUrl("javascript:js中定义的方法")         */        button.setOnClickListener(new Button.OnClickListener() {            public void onClick(View v) {                // 无参数调用  android端调用js 方法                mWebView.loadUrl("javascript:actionFromNative()");                // 传递参数调用                mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from Native'" + ")");            }        });1
2
3
4
5
6
7
8
9
10
11
12
13

这样就能实现相互之间的伤害了.

3.bug修复

有些手机使用webview打开时.会提示用浏览器打开网页.我们要对webview设置一下了

 /**         *  重写这个方法的话,加载页面就不会弹出浏览器打开了         */        mWebView.setWebViewClient(new WebViewClient() {            @Override            public boolean shouldOverrideUrlLoading(WebView view, String url) {                view.loadUrl(url);                return true;            }            /**             *  页面加载完成回调             * @param view             * @param url             */            @Override            public void onPageFinished(WebView view, String url) {                super.onPageFinished(view, url);            }        });1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

附:实现代码

http://download.csdn.net/detail/fengltxx/9694232

阅读全文

0 0