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

来源：互联网发布：喜欢男朋友的丁丁知乎编辑：程序博客网时间：2024/06/06 09:40

直接上代码好了，原理就是遍历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);    }}

0 0

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

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