动态获取WebView中的数据

在安卓中显示html页面可以使用WebView控件，那么如何从WebView中动态地获取到数据呢。其实很简单。先上效果图

WebView中嵌入的范围选择器

Android Log中实时获取到了数据

第一步:自定义一个类,它的方法的参数是从js中获取的数据，方法体是Android对数据做的处理。

class JavaInJS {   
  @android.webkit.JavascriptInterface    
   public void showHeight(String html) {       
      Log.e("data", "height: " + html);   
  }    
 
  @android.webkit.JavascriptInterface   
   public void showAge(String html) {        
       Log.e("data", "age: " + html);    
   }
}

第二步:给webView添加addJavascriptInterface方法。 给它传两个参数，一个是刚才写的类的实例，一个是这个类的实例名,这个名字会在js代码中被用到

View contextView = inflater.inflate(R.layout.fragment_info_love,container,false); 
webView = (WebView) contextView.findViewById(R.id.fragment_info); 
webView.getSettings().setJavaScriptEnabled(true); 
//JavaInJS是自己写的一个类, "javaInJS"是JS中这个类的实例名
webView.addJavascriptInterface(new JavaInJS(), "javaInJS" ); 
//这句也是必须的
webView.setWebChromeClient(new WebChromeClient(){}); 
webView.loadUrl("file:///android_asset/love_setting.html");

第三步:在JS代码中调用第一步中写的方法
当选择器滑动的时候会触发onstatechange方法,我在onstatechange方法中调用
window.在第二步中起的实例名.方法(需要传的数据)
就搞定啦!

    $('#height-slider').jRange({
                from: 140,
                to: 220,
                step: 1, 
                format: '%s',
                width: 300,
                showLabels: true,
                showScale: false,
                isRange : true,
                theme: "theme-blue",
                onstatechange: function(){
                    $('#heightR').html($('#height-slider').val().replace(',',' - '));
                    //在js中调用java代码,传数据
                    window.javaInJS.showHeight($('#heightR').html());
                }
            });