WebView 点击图片在移动端要注入JS 去搞定 但是一般这种需求也是可以教给你们丰富经验的H5前端小姐姐(小哥哥)进行搞定的
那么如果前端小哥哥或者小姐姐不会怎么办那么请看下文
1 添加网络权限
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
2 编写JavaInterface 代码 当然我们要注意@JavaScruiInterface 下的方法名 此时记住它 openImage 直接跳转 3
public class MJavascriptInterface {
private Activity context;
public MJavascriptInterface(Activity context) {
this.context = context;
}
@android.webkit.JavascriptInterface
public void openImage(String img, String[] array) {
ArrayList<String> list = addImages(array);
//查看当前点击图片的索引
int i = list.indexOf(img);
//跳转显示图片页面
Intent intent = new Intent(context, WebViewImageOpen.class);
intent.putStringArrayListExtra("imageUrls", list);
intent.putExtra("curImg", img);
intent.putExtra("index", i);
context.startActivity(intent);
}
//去重复的图片路径
private ArrayList<String> addImages(String [] array) {
ArrayList<String> list = new ArrayList<>();
Set set = new HashSet();
for (String cd:array) {
if(set.add(cd)){
list.add(cd);
}
}
return list;
}
}
3 添加JAVAscript 代码 在window.imagelistener后面就是我们 2 的那个方法名搞错了就不出效果了哟并且查看 onclick 是否有空格合作大小写错误 并且记住 imagelistener 并且注意一下 getElementsByTagName 这个方法中的img如果拿不到那就问下H5图片是不是修改了名字 如果修改了那么就进行修改和H5一样的名字就OK 看4
private void addImageClickListener() {
wvBookPlay.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].onclick=function() " +
" { "
+ " window.imagelistener.openImage(this.src,array); " +
" } " +
"}" +
"})()");
}
4 注入WebView addJavascriptInterface 中的imagelistener 要和3 的一样不然也没有效果哟 此时我们把 2 个3 的整合放到4 就已经拿到了,其实就是强行给HTML 注入我们写好的JS 可以灵活变通不想要图片也是可以的
wvBookPlay.getSettings().setJavaScriptEnabled(true);
wvBookPlay.addJavascriptInterface(new MJavascriptInterface(this), "imagelistener");
wvBookPlay.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);
addImageClickListener();//待网页加载完全后设置图片点击的监听方法
}
});
5 上面是 完成拿到下面是 图片展示 我用了一个PhotoView的插件并且使用了拦截上下滑动的ViewPager在下贴出来
implementation 'com.github.chrisbanes:PhotoView:2.0.0'
5.1 自定义ViewPager 讲次View放到你的2标题中 自己写的Activity 当然不想自己写一下复制我的
public class HackyViewPager extends ViewPager {
private boolean isLocked;
public HackyViewPager(Context context) {
super(context);
isLocked = false;
}
public HackyViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
isLocked = false;
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {//用于处理Touch事件
if (!isLocked) {
try {
return super.onInterceptTouchEvent(ev);
} catch (IllegalArgumentException e) {
e.printStackTrace();
return false;
}
}
return false;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
return !isLocked && super.onTouchEvent(event);
}
}
5.2 做好显示的子View布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.github.chrisbanes.photoview.PhotoView
android:id="@+id/photoview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:textSize="18sp"
android:textColor="@android:color/black"
android:text="@string/viewpager_indicator"
android:background="@android:color/transparent" />
</RelativeLayout>
里面引用了一个String 我贴出来放到values String中
<string name="viewpager_indicator">%1$d/%2$d</string>
接下来就是展示了 大功告成
public class WebViewImageOpen extends AppCompatActivity {
private HackyViewPager hackyviewpager;
private ArrayList<String> imageUrls;
private int index;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);//设置固定状态栏常驻,不覆盖app布局
getWindow().setStatusBarColor(Color.parseColor("#FFFFFF"));//设置状态栏颜色
}
setContentView(R.layout.activity_web_view_image_open);
//自定义ViewPager
hackyviewpager = findViewById(R.id.viewpager);
Intent intent = getIntent();
if (intent != null) {
imageUrls = intent.getStringArrayListExtra("imageUrls");
index = intent.getIntExtra("index", 0);
}
hackyviewpager.setAdapter(new ViewPagerAdapter());
hackyviewpager.setCurrentItem(index);
}
class ViewPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return imageUrls.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = View.inflate(WebViewImageOpen.this, R.layout.view_pager_item, null);
PhotoView photoView = (PhotoView) view.findViewById(R.id.photoview);
TextView indicator = (TextView) view.findViewById(R.id.indicator);
//用Glide加载图片
Glide.with(WebViewImageOpen.this).load(imageUrls.get(position)).into(photoView);
CharSequence text = getString(R.string.viewpager_indicator, position + 1, imageUrls.size());
//设置indicator
indicator.setText(text);
container.addView(view, ViewPager.LayoutParams.MATCH_PARENT, ViewPager.LayoutParams.MATCH_PARENT);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}