Android与JS互调

相信大家看完代码就会明白：

MainActivity.java

package com.example.testjs;import android.annotation.SuppressLint;import android.app.Activity;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Handler;import android.webkit.JavascriptInterface;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebSettings.RenderPriority;import android.webkit.WebView;import android.webkit.WebViewClient;import android.widget.Toast;import com.example.testjs.utils.Constant;/** * 实现Android本地Java与JS的互调 * 1.Android调用JS: * mWebView.loadUrl("javascript:" + "function()"); *  * 2.JS调用Android： * a.设置WebView支持JS：mWebView.getSettings().setJavaScriptEnabled(true); * b.创建一个JS调用代理类：class JavascriptInterfaceProxy * 1).Android 4.2 以后需要将代理类中的方法注解：@JavascriptInterface * c.mWebView.addJavascriptInterface(new JavascriptInterfaceProxy(), "MyJsInterface"); *  * @author Yanbao_Wu * */public class MainActivity extends Activity {public static final String TAG = MainActivity.class.getSimpleName();public static final int SAY_HELLO = 0;public static final int SAY_BYEBYE = 1;private WebView mWebView = null;@SuppressLint("HandlerLeak") public Handler mHandler = new Handler(){public void handleMessage(android.os.Message msg) {switch (msg.what) {case SAY_HELLO:Toast.makeText(MainActivity.this, "just say hello from JS", Toast.LENGTH_SHORT).show();break;case SAY_BYEBYE:Toast.makeText(MainActivity.this, "Bye-bye called from JS", Toast.LENGTH_SHORT).show();default:break;}};};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);                findId();        initWebView(mWebView);    }        /**     * @author Yanbao_Wu     */    public void findId(){    mWebView = (WebView) findViewById(R.id.webview_contend);    }        /**     * Init the web settings.     *      * @author Yanbao_Wu     */    @SuppressLint("SetJavaScriptEnabled")     public void initWebView(WebView mWebView){    mWebView.getSettings().setJavaScriptEnabled(true);mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);mWebView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);// 设置可以使用localStoragemWebView.getSettings().setDomStorageEnabled(true);// 应用可以有数据库mWebView.getSettings().setDatabaseEnabled(true);String cacheDirPath = getFilesDir().getAbsolutePath() + Constant.APP_H5_CACHE_DIRNAME;// 设置 H5缓存目录mWebView.getSettings().setAppCachePath(cacheDirPath);// 应用可以有缓存mWebView.getSettings().setAppCacheEnabled(true);/** *  注意： * 由于4.4之前使用的是WebKit内核，而4.4使用的是chromium内核， * 所以WebViewClient中的方法调用的次数和顺序会不一样，如果按照正常的逻辑处理， *  可能会出现一些问题，这里可以做些版本兼容性判断。 */mWebView.setWebViewClient(new WebViewClient(){@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {// 自定义加载过程中的动画，例如一个loading的界面super.onPageStarted(view, url, favicon);}@Overridepublic void onPageFinished(WebView view, String url) {// TODO Auto-generated method stubsuper.onPageFinished(view, url);}@Overridepublic void onReceivedError(WebView view, int errorCode,String description, String failingUrl) {// 可以自定义错误页面覆盖WebViewsuper.onReceivedError(view, errorCode, description, failingUrl);}});mWebView.setWebChromeClient(new WebChromeClient(){@Overridepublic void onReceivedTitle(WebView view, String title) {/* * 可以获取Web页面的Title来设置移动端的Title, * 但是在部分手机上，调用goBack()方法时，不会触发onReceivedTitle()方法所以onTitle没有变化， * 所以需要做简单的处理： * 1.已知WebView最多只有二级页面，不存在更深层次的页面时，可以在调用goBack的时候，直接将Title设置回去就可以了 * 2.当WebView的页面层次不确定时，可能会有很深层次的页面，这时需要我们手动的去维护对应页面的Title的一个栈了，我们可以 * 使用HashMap去维护这样的（url,title）的栈，当进去新的页面时直接加到Map中即可，当回退是进行退栈操作就可以了 * 当WebView加载出错时，Title会显示"找不到该网页"，所以需要我们在onReceivedError方法中自行更改Title */super.onReceivedTitle(view, title);}});/* * 第一个参数代理类的对象，第二个参数供JS调用方法的对象名称 * JS调用的方式大致可以通过： * MyJsInterface.testJS(); * MyJsInterface.testLowVerssion(); // Android 4.2以后不能调用 */mWebView.addJavascriptInterface(new JavascriptInterfaceProxy(), "MyJsInterface");mWebView.loadUrl("file:///android_asset/js.html");    }        /**     * The proxy class which used by JS.     *      * @author Yanbao_Wu     */    public class JavascriptInterfaceProxy{        @JavascriptInterface    public void testJS(){    mHandler.sendEmptyMessage(SAY_HELLO);    mWebView.loadUrl("javascript:wave()");    }        // 4.2以后不能被JS调用    public void testLowVerssion(){    mHandler.sendEmptyMessage(SAY_BYEBYE);    }    }        @Override    protected void onDestroy() {//如果WebView中加载音频后退出Activity音频声音无法消失，可通过以下方法解决//    rootLayout.removeView(webView);  //    webView.destroy();    super.onDestroy();    }}

下面是一个HTML的代码，放在项目的assets目录下：

<html>        <script language="javascript">                        function wave() {}        </script>        <body>            <a onClick="MyJsInterface.testJS()">                                <br>                                Click me!            </a>        </body></html>