您的位置：首页 > 理论基础 > 计算机网络

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

2017-03-17 18:00 861 查看

直接上代码好了，原理就是遍历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 实现对网络图片添加点击事件查看大图