Android与JS交互

文／HuDP（简书作者）
原文链接：http://www.jianshu.com/p/56043aeadc3d
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

在现在的App当中，我们经常需要在原生界面中插入HTML5页面，需要在两者之间交互，也就是原生代码和HTML5互调方法，一起来了解一下如何实现的吧！

1.原生代码调用HTML5页面方法
例如，app要调用HTML5页面的changeColor(color)的方法，来改变HTML5页面的颜色
1）HTML5

 <script type="text/javascript">   
  document.write("Hello World!")  
  function changeColor(color){  document.body.style.background = color;    } </script>

2）

 wvMain.getSettings().setJavaScriptEnabled(true);   //开启JavaScript支持   
  wvMain.loadUrl("file:///android_asset/show.html");    //放在assets的html需加上     android_asset/ ；也可以用网络上的文件
  // 添加一个对象, 让JS可以访问该对象的方法, 该对象中可以调用JS中的方法
  wvMain.addJavascriptInterface(new JSInterface1(),"baobao"); 
  btnOne.setOnClickListener(new View.OnClickListener() {  
  @Override    
   public void onClick(View v) {       
   String color = "#cccccc";   wvMain.loadUrl("javascript: changeColor('"+color+"')");    }});

---------------分割线---------------

2.HTLM5页面调用原生方法
例如，点击HTML5页面的文字，回调原生代码中的callAndroidMethod方法
1）HTML5

   <a onClick="baobao.callAndroidMethod(100,100,'ccc',true)">CallAndroidMethod</a>

2) Android

   class JSInterface1 {    

    //JavaScript调用此方法
   @JavascriptInterface     

   public void callAndroidMethod(int a,float b, String c,boolean d){
    if(d){           
        String strMessage = "a+b+c="+a+b+c;       
      new AlertDialog.Builder(MainActivity.this).setTitle("title").setMessage(strMessage).show();        
         }  
     }
  }
   

到此简单的Android与HTML5代码间的互调就完成了

<在某些场景，Java调用js，如果js没有加载完成，就会掉用不成功，有对应的js加载完成的监听方法>

文／HuDP（简书作者）
原文链接：http://www.jianshu.com/p/56043aeadc3d
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

PS:  为了提高安全性在17以上版本中js只能调用有 @JavascriptInterface 注解的方法

关于android与JS交互17以下版本的安全性问题参考：http://blog.csdn.net/qq_31715429/article/details/50972559