现在很多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

文章来源: wukong.blog.csdn.net，作者：再见孙悟空_，版权归原作者所有，如需转载，请联系作者。

原文链接：wukong.blog.csdn.net/article/details/52623823