App与HTML的交互

title: App与HTML的交互
tags: 学习笔记,Android,App与HTML5的交互

1. App操作HTML5页面的方法
   在assets中内置了一个HTML5页面。现实中，这个HTML5页面应该是放在服务器上的。
   首先要定好通信协议，也就是App要调用的HTML5页面中JavaScript的方法名称。
   例如，App要调用HTML5页面的changeColor(color)方法，改变HTML5页面的背景颜色。
   HTML5页面：

   <script type="text/javascript">
       function changeColor(color) {
           document.body.style.backgroundColor = color;
       }
   </script>
   

   Android

   mWebView = (WebView)findViewById(R.id.webview);
   mWebView.getSettings().setJavaScriptEnabled(true);
   mWebView.loadUrl("file:///android_asset/newhtml.html");
   
   btnChange = (Button)findViewById(R.id.btn_change);
   btnChange.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v) {
           String color = "#00ee00";
           mWebView.loadUrl("javascript:changeColor('" + color + "');");
       }
   });
   

2. HTML5页面操作App页面的方法
   定义JavaScript要调用的Android中方法名称。
   例如，点击HTML5的文字，回调Java中的callAndroidMethod方法：
   HTML5

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

   Android
   创建一个JSInterface类，包括callAndroidMethod方法：

   class JSInterface {
       @JavascriptInterface
       public void callAndroidMethod(int a, float b, String c, boolean d) {
           if (d) {
               String message = "-" + (a + 1) + "-" + (b + 1) + "-" + c + "-" + d;
               new AlertDialog.Builder(WebViewActivity.this)
                       .setTitle("title")
                       .setMessage(message)
                       .show();
           }
       }
   }
   

   同时，需要注册demo和JSInterface的对应关系:

   mWebView.addJavascriptInterface(new JSInterface(), "demo");
   

   在Android4.2以后需要加上@JavascriptInterface注解
   经过查官方文档所知，因为这个接口允许JavaScript 控制宿主应用程序，这是个很强大的特性，但同时，在4.2的版本前存在重大安全隐患，因为JavaScript 可以使用反射访问注入webview的Java对象的public fields，在一个包含不信任内容的WebView中使用这个方法，会允许攻击者去篡改宿主应用程序，使用宿主应用程序的权限执行java代码。因此4.2以后，任何为JS暴露的接口，都需要加