Android WebView JS交互之响应WebView中的图片点击事件

开发需求是点击webview中的图片进行大图查看显示。
那么webview中如何调用js中的方法获取图片资源和图片的position呢？服务端提供的js方法如下：

     //调用app内置的图片幻灯片查看图片
        $(".newscontent img").click(function(){
           if(typeof chanceapp != 'undefined' && $(this).parent().prop('tagName') != 'A' && $(this).parent().parent().prop('tagName') != 'A' && $(this).attr("src").substr(0,5)!="data:"){
                var i = 0;
                for(i = 0; i < imgs.length; i++){
                    if(imgs[i] == $(this).attr("src"))break;
                }
                if(typeof chanceapp.showImgIndex != 'undefined'){
                    chanceapp.showImgIndex(imgs,i.toString());
                }else if(typeof chanceapp.setImgIndex != 'undefined'){
                    chanceapp.setImgIndex(imgs,i.toString());
                }
           }
        });

这里我们可以看到if(typeof chanceapp.showImgIndex != 'undefined'){
chanceapp.showImgIndex(imgs,i.toString());
} 这一句代码中可以看到chanceapp接口中提供了一个showImgIndex()方法，其中包含了图片资源和点击的position。那么我只要想办法调用该方法就行了。

demo代码：

package com.example.testdemo;

import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebSettings.PluginState;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

    private WebView webview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webview = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = webview.getSettings();
        webSettings.setPluginState(PluginState.ON);
        webSettings.setJavaScriptEnabled(true);// 启动js脚本
        webSettings.setBuiltInZoomControls(true);// 启动内置缩放
        webSettings.setSupportZoom(false);// 支持缩放
        webSettings.setUseWideViewPort(true);// 设置此属性，可任意比例缩放
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
        webSettings.setDomStorageEnabled(true); //处理js方法调用出错情况
        webview.requestFocusFromTouch();
        webSettings.setSaveFormData(false); //不缓存表单数据
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);//设置脚本是否允许自动打开弹窗，默认false，不允许
        webview.loadUrl("http://sz.21chance.com/wweb_8/newsdetail.php?accid=4&newsid=28816");

        //添加与js的交互接口,起的名称与js代码中的接口名称要一致
        webview.addJavascriptInterface(new JavascriptImgInterface(), "chanceapp");


        webview.setWebViewClient(new WebViewClient() {

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url != null) {
                    view.loadUrl(url);
                }
                return true;
            }

            @Override
            public void onReceivedError(WebView view, int errorCode,
                                        String description, String failingUrl) {
                super.onReceivedError(view, errorCode, description, failingUrl);
            }
        });

    }

    public class JavascriptImgInterface{

        JavascriptImgInterface(){

        }

        /**
         * 注意： 在Android4.2极其以上系统需要给提供js调用的方法前加入一个注视：@JavaScriptInterface;
         *  在虚拟机当中 Javascript调用Java方法会检测这个anotation，
         * 如果方法被标识@JavaScriptInterface则Javascript可以成功调用这个Java方法，否则调用不成功。
         * 
         * @param imgs
         * @param position
         */
        @JavascriptInterface
        public void showImgIndex(String[] imgs, String position){
            //这里就拿到图片数据和点击的位置
            Log.i("TAG", "position: " + position + "," +imgs[Integer.valueOf(position)]);
        }

    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        webview.clearFormData();
        webview.destroy();
    }
}

简单记录下,写代码时因为忽视查看JS代码造成了一个小问题。在进行交互时主要要看清楚js中提供的方法。