浅谈android和js的交互问题

现在很多app里面很多功能都用html5实现，也就是用webview加载html显示一些 图文信息。这么做的好处就是减少开发成本 ，一套html在android  ，ios及web都可以跑。节省了很多开发成本。但是这个也就带来相应的一些问题。最大问题就是交互问题。所以下面给大家说一下android和js怎么实现交互（android调用js中的方法，js里面调用android的方法）。

一.js调用android

webview设置

//设置编码
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");
        //支持js
        mWebView.getSettings().setJavaScriptEnabled(true);
        //设置本地调用对象及其接口
        mWebView.addJavascriptInterface(new JavaScriptObject(mContext), "myObj");
        //载入js
        mWebView.loadUrl("file:///android_asset/test.html");

方法声明：

class JavaScriptObject {
        Context mContxt;
        public JavaScriptObject(Context mContxt) {
            this.mContxt = mContxt;
        }
        @JavascriptInterface
        public void getAndroidMethod(String name) {
            Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show();
        }
    }

html中js调用

<script>
    
    function funFromjs(){
    	document.getElementById("mydiv").innerHTML="android调用了js的方法";
    }
    var aTag = document.getElementsByTagName('a')[0];
    aTag.addEventListener('click', function(){
        //调用android本地方法
    myObj.getAndroidMethod("js调用了android的方法！");
        return false;
    }, false);
    </script>

测试的test.html放到android的assets目录下面。

二.android调用js

android 调用js   客户端代码： 

mWebView.loadUrl("javascript:funFromjs()");

funFromjs这个函数 是在html里面的js 声明好的。 大家看上面的代码里面有这个函数。

三.特别注意的地方

总的来说很简单，但是有两点需要特别注意的。 

第一点

mWebView.addJavascriptInterface(new JavaScriptObject(mContext), "myObj");

myObj.getAndroidMethod("js调用了android的方法！");

js代码里面的 myObj  不用特殊定义一个对象 ，这个对象是在android webview加载html时候注入的对象，可以认为他们俩就是一个对象。

第二点@JavascriptInterface

大家注意在android 声明出来的方法前面 要加上这个javasriptInterface 注解，否则会报Uncaught TypeError: Object [object Object] has no method...  这个错误。

正常需要判断为 targetSdkVersion>=17时，需要加上@JavascriptInterface，所以target=android-17或更高以便引入高版本android.jar。反之，如果仅targetSdkVersion低于17，那么目标版本不用加@JavascriptInterface，当然加上也行。

所以大家直接加上就可以。

这个交互的demo我已经上传  下载地址

如果大家还有其它问题或者不同意见，可以评论，也可以加入我的qq群讨论：Android开发经验交流群 454430053