当前位置:网站首页>WebView injects Js code to realize large image adaptive screen click image preview details
WebView injects Js code to realize large image adaptive screen click image preview details
2022-08-09 13:16:00 【Xie Dong_】
Opening title: When the webview in android loads the web page through the url, if the web page happens not to be individually adapted to the mobile phone, then the url we get is directly loaded into the webview by means of loadUrl.Some adaptation problems are prone to occur. Even if you set the web page adaptation through websettings, it is difficult to deal with the styles in some details, especially the image resources. Some CSS styles are done according to the adaptation of the PC side and loaded to the mobile phone.It is easy to have style problems. Let's take the example of processing pictures on the webpage before and after the adaptation.
No picture, no truth:
As you can clearly see in the above picture, the left side is not adapted. The picture on the webview exceeds the screen display. You can only preview the full picture by sliding left and right. The right picture is the picture that adapts to the screen after injecting js code., you can clearly see that the width of the picture on the screen is the width of the screen, and by injecting js code to the picture on the web page, the click preview function is added.
Implementation idea analysis:
1. The webvie above is a web page loaded by loadurl, so it is impossible for us to change the structure and style of the html code before loading the web page. We start from another point of view and use webviewClient to monitor the web page loading finish and then perform interception processing, and then inject the corresponding js code to complete our expected effect.
2. If you are loading a web page in the form of loadData, you can use regular expressions to add styles. I will not go into details. This blog post mainly explains the first method, and readers can implement it by themselves.
Sample code:
1. Since js code needs to be injected, it must be set to support JavaScript references for webview
wvCompContent.getSettings().setJavaScriptEnabled(true);
2. Next, we give the ResizeImgWebViewClient that we extend from WebviewClient to the set, and inject the js code that makes the image adapt to the screen width after the web page is loaded.
wvCompContent.setWebViewClient(new ResizeImgWebviewClient());
public class ResizeImgWebviewClient extends WebViewClient {@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);resizeImg(view);addImgClickEvent(view);}/*** Add image click event** @param view*/private void addImgClickEvent(WebView view) {view.loadUrl("javascript:(function(){" +"var objs = document.getElementsByTagName(\"img\"); " +"for(var i=0;i
Now that we have completed the operation of the image width and height adaptive screen, readers may notice that there is a js code to add click events to the image on the ResizeImgWebviewClient. This involves the interaction of the web page to the native, so we need to addJavaScriptInterace, bind the response JSBridge into it
wvCompContent.addJavascriptInterface(new JsBridge(), "JsBridge");
3. In jsBridge, we intercept the specific operation of the image on the web page to process the response. For example, you can start a new Activity or fragment and then load the image uploaded from the web page through image loading tools such as glideThe url to realize the operation of clicking the picture to view the picture details, I posted the code of the preview picture, which is the picture preview tool class encapsulated in my project, for readers' reference only
public class JsBridge {/*** Response to click on image event on webview (large image preview)** @param url*/@JavascriptInterfacepublic void openImage(String url) {List images = new ArrayList<>();LocalMedia localMedia = new LocalMedia();localMedia.setPath(url);images.add(localMedia);MediaConfig.getInstance().picturePreview(AppManager.getInstance().currentActivity(), 0, images);}}
At this point, the whole process is over. To sum up, by intercepting and injecting js, we have completed the operation of adjusting the width and height of the pictures that were not previously adapted to the mobile phone, and also through the web page.The interaction to the native adds a click event to the picture on the web page, and adds a logical operation of clicking to view the picture details after listening to the click event on the native.
边栏推荐
- 手写大根堆
- Nature:猪死亡1小时后,器官再次运转
- "Digital Economy Panorama White Paper" Special Analysis of Banking Industry Intelligent Marketing Application Released
- Reading and writing after separation, performance were up 100%
- Flutter入门进阶之旅(五)Image Widget
- glide工具类的简单封装
- Apexsqlrecover无法连接数据库
- 在“Extend the Omniverse”比赛中构建用于 3D 世界的工具
- 阻塞、非阻塞、多路复用、同步、异步、BIO、NIO、AIO 一锅端
- Two minutes recording can pass by second language!The volcano how to practice and become voice tone reproduction technology?
猜你喜欢
报告:想学AI的学生数量已涨200%,老师都不够用了
Fragment中嵌套ViewPager数据空白页异常问题分析
900页数学论文证明旋转的黑洞不会爆炸,丘成桐:30多年来广义相对论首次重大突破...
Flutter入门进阶之旅(二)Hello Flutter
HAproxy: load balancing
自定义VIEW实现应用内消息提醒上下轮播
脱光衣服待着就能减肥,当真有这好事?
2022 Niu Ke Duo School (6) M. Z-Game on grid
Batch大小不一定是2的n次幂!ML资深学者最新结论
Common gadgets of Shell (sort, uniq, tr, cut)
随机推荐
Batch大小不一定是2的n次幂!ML资深学者最新结论
Two minutes recording can pass by second language!The volcano how to practice and become voice tone reproduction technology?
The latest interview summary in 20022 brought by Ali senior engineer is too fragrant
redis库没法引入
用皮肤“听”音乐,网友戴上这款装备听音乐会:仿佛住在钢琴里
Say goodbye to the AI era of hand looms
链表噩梦之一?5000多字带你弄清它的来龙去脉
关于Retrofit网络请求URL中含有可变参数的处理
Gumbel_Softmax 概要
World's 4th mad scientist dies on his 103rd birthday
1小时直播招募令:行业大咖干货分享,企业报名开启丨量子位·视点
在“Extend the Omniverse”比赛中构建用于 3D 世界的工具
使用注解将EventBus封装抽取到基类
读写分离后,性能居然提升100%了呀
阿里高工带来的20022最新面试总结太香了
超越CLIP的多模态模型,只需不到1%的训练数据!南加大最新研究来了
报告:想学AI的学生数量已涨200%,老师都不够用了
WebView注入Js代码实现大图自适应屏幕点击图片预览详情
听声辨物,这是AI视觉该干的???|ECCV 2022
go基础之web获取参数