当前位置:网站首页>WebView注入Js代码实现大图自适应屏幕点击图片预览详情
WebView注入Js代码实现大图自适应屏幕点击图片预览详情
2022-08-09 12:04:00 【谢栋_】
开题:android中webview通过url加载网页时,如果web页恰巧没对手机做单独适配的话,那我们拿到的url直接通过loadUrl的方式加载到webview上很容易出现一些适配上的问题,即使你通过websetings设置网页自适应,也很难处理部分细节上的样式,特别是图片资源,部分css样式是按照pc端的适配去做的,load到手机上很容易出现样式问题,下面就拿网页上适配前跟适配后的网页中图片的处理举例。
无图无真相:
上图可以很清楚的看到,左边是没适配的,图片在webview上超出了屏幕显示,只能通过左右滑动预览全图,右图为通过注入js代码后自适应屏幕的图片,可以清楚的看到屏幕上图片的宽度就是屏幕的宽度,并且通过注入js代码给网页上的图片添加了点击预览大图功能。
实现思路分析:
1.上述中webvie是通过loadurl的方式加载的网页,所以在加载网页之前我们不可能改变html代码的结构跟样式,我们从另外一个角度入手,通过webviewClient监听网页加载finish之后做拦截处理,然后注入相应的js代码,来完成我们预期的效果。
2.如果你是通过loadData的形式加载的网页,可以采用正则来添加样式,具体我就不细说了,该博文主要讲解第一种方式,读者可自行实现。
样例代码:
1.由于需要注入js代码,肯定需要给webview设置支持JavaScript引用
wvCompContent.getSettings().setJavaScriptEnabled(true);
2.接下来我们给set上我们扩展自WebviewClient的ResizeImgWebViewClient,监听网页加载完成之后注入让图片自适应屏幕宽度的js代码
wvCompContent.setWebViewClient(new ResizeImgWebviewClient());
public class ResizeImgWebviewClient extends WebViewClient {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
resizeImg(view);
addImgClickEvent(view);
}
/**
* 添加图片点击事件
*
* @param view
*/
private void addImgClickEvent(WebView view) {
view.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName(\"img\"); " +
"for(var i=0;i<objs.length;i++) " +
"{"
+ " objs[i].onclick=function() " +
" { "
+ " window.JsBridge.openImage(this.src); " +
" } " +
"}" +
"})()");
}
/**
* 重新调整图片宽高
*
* @param view
*/
private void resizeImg(WebView view) {
view.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName('img'); " +
"for(var i=0;i<objs.length;i++) " +
"{"
+ "var img = objs[i]; " +
" img.style.maxWidth = '100%'; img.style.height = 'auto'; " +
"}" +
"})()");
}
}
现在我们已经完成了对图片宽高自适应屏幕的操作,读者可能留意到上ResizeImgWebviewClient上还有一段给图片添加点击事件的js代码,这里涉及到web页交互到原生,所以我们需要addJavaScriptInterace,把响应的JSBridge绑定进去
wvCompContent.addJavascriptInterface(new JsBridge(), "JsBridge");
3.在jsBridge中,我们拦截到web页上对图片的具体操作,去做响应的处理,比如你可以新启一个Activity或者fragment然后通过glide等图片加载工具加载从网页上传来的图片的url来实现点击图片查看图片详情的操作,我贴出预览图片的代码,是我项目中封装好的图片预览工具类,仅供读者参考
public class JsBridge {
/**
* 响应webview上点击图片事件(大图预览)
*
* @param url
*/
@JavascriptInterface
public void openImage(String url) {
List<LocalMedia> images = new ArrayList<>();
LocalMedia localMedia = new LocalMedia();
localMedia.setPath(url);
images.add(localMedia);
MediaConfig.getInstance().picturePreview(AppManager.getInstance().currentActivity(), 0, images);
}
}
至此整个过程就结束了,总结一下就是我们通过拦截注入js的方式,完成了对原先没有适配到手机上的图片做到了宽高自适应屏幕的操作,并且还通过web页简单的交互到原生给web页上的图片添加了点击事件,并且在原生上监听到点击事件之后添加了点击查看图片详情的逻辑操作。
边栏推荐
- Golang学习之路(五):Golang的函数
- 基于CAP组件实现补偿事务与幂等性保障
- How should the acceptance criteria for R&D requirements be written?| Agile Practices
- 鹅厂机器狗花式穿越10m梅花桩:前空翻、单桩跳、起身作揖...全程不打一个趔趄...
- 非科班AI小哥火了:他没有ML学位,却拿到DeepMind的offer
- 微信一面:一致性哈希是什么,使用场景,解决了什么问题?
- [Interview high-frequency questions] Linked list high-frequency questions that can be gradually optimized
- 【小程序】低代码+小游戏=小游戏可视化开发
- 在北极都可以穿短袖了,温度飙升至32.5℃
- 又有大厂员工连续加班倒下/ 百度搜狗取消快照/ 马斯克生父不为他骄傲...今日更多新鲜事在此...
猜你喜欢
随机推荐
罗振宇折戟创业板/ B站回应HR称用户是Loser/ 腾讯罗技年内合推云游戏掌机...今日更多新鲜事在此...
Blocking, non-blocking, multiplexing, synchronous, asynchronous, BIO, NIO, AIO all in one pot
Gumbel_Softmax 概要
Adalvo acquires its first branded product, Onsolis
中科院打脸谷歌:普通电脑追上量子优越性,几小时搞定原本要一万年的计算...
微信小程序支付及退款整体流程
GPT-3组合DALL·E,60秒内搞定游戏设定和原型动画!网友看后:这游戏想玩
The redis library cannot be imported
微信支付开发流程
数据挖掘-06
Recommend a free 50-hour AI computing platform
Here comes the question: Can I successfully apply for 8G memory on a machine with 4GB physical memory?
FFmpeg在win10上编译安装(配置libx264)
【HCIP持续更新】IS-IS协议原理与配置
WeChat payment development process
FFmpeg库在win10上配置使用(不配置libx264)
基于CAP组件实现补偿事务与幂等性保障
超越CLIP的多模态模型,只需不到1%的训练数据!南加大最新研究来了
Senior told me that the giant MySQL is through SSH connection
用皮肤“听”音乐,网友戴上这款装备听音乐会:仿佛住在钢琴里