Android 利用JS 实现对网络图片添加点击事件查看大图

直接上代码好了，原理就是遍历h5标签，找到图片，给图片添加点击事件。。。。js代码中有个小坑就是涉及到了js的闭包问题，for循环取i。。。。

public class WebViewFragment extends Fragment implements MvpView {
    private WebView contentWebView = null;
    String content;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.content = this.getArguments().getString("CONTENT");
    }

    public static WebViewFragment newInstance(String content)
    {
        WebViewFragment webViewFragment = new WebViewFragment();
        Bundle bundle = new Bundle();
        bundle.putString("CONTENT",content);
        webViewFragment.setArguments(bundle);
        return webViewFragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_webview,container,false);
        contentWebView = (WebView) view.findViewById(R.id.webview);
        contentWebView.getSettings().setJavaScriptEnabled(true);
        contentWebView.setWebViewClient(new MyWebViewClient());
        contentWebView.addJavascriptInterface(new MJavascriptInterface(getActivity()), "imagelistener");
        contentWebView.loadDataWithBaseURL(null,"<head><style>img{width:100% !important;}</style></head>"+content,"text/html","utf-8",null);
        return view;
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
    }

    @Override
    public void onShowProgress() {

    }

    @Override
    public void onHideProgress() {

    }

    @Override
    public void onError(String errorMsg) {

    }

}

下面是两个核心类

public class MyWebViewClient extends WebViewClient{
    @Override
    public void onPageFinished(WebView view, String url) {
        view.getSettings().setJavaScriptEnabled(true);
        super.onPageFinished(view, url);
        addImageClickListener(view);//待网页加载完全后设置图片点击的监听方法
    }

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

    private void addImageClickListener(WebView webView) {
        webView.loadUrl("javascript:(function(){ " + "var objs = document.getElementsByTagName(\"img\");"
                + " var array=new Array(); " + " for(var j=0;j<objs.length;j++){ " + "array[j]=objs[j].src;" + " }  "
                + "for(var i=0;i<objs.length;i++){"
                +"objs[i].i=i;"
                + "objs[i].onclick=function(){  window.imagelistener.openImage(this.src,array,this.i);" + "}  " + "}    })()");

    }
}

package com.gogosu.gogosuandroid.ui.documents.tools;

import android.content.Context;
import android.content.Intent;

import com.gogosu.gogosuandroid.model.Constant.IntentConstant;
import com.gogosu.gogosuandroid.ui.util.MultiplePhotoViewActivity;

import java.util.ArrayList;

/**
 * Created by chengjia on 17-3-1.
 */

public class MJavascriptInterface {
    private Context context;

    public MJavascriptInterface(Context context) {
        this.context = context;
    }

    @android.webkit.JavascriptInterface
    public void openImage(String img,String[] imageUrls,int position) {
        Intent mIntent = new Intent(context, MultiplePhotoViewActivity.class);
        ArrayList<String> strings=new ArrayList<>();
        for(String s:imageUrls)
        {
            strings.add(s);
        }
        mIntent.putStringArrayListExtra(IntentConstant.MULTIPLE_PHOTO_URI,strings);
        mIntent.putExtra(IntentConstant.MULTIPLE_PHOTO_VIEW_PAGER_CURRENT_POSITION,position);
        context.startActivity(mIntent);
    }
}

Android 利用JS 实现对网络图片添加点击事件 查看大图

猜你喜欢

Android 利用JS 实现对网络图片添加点击事件查看大图