当前位置:网站首页>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.
边栏推荐
- Flutter入门进阶之旅(四)文本输入Widget TextField
- Reading and writing after separation, performance were up 100%
- 1小时直播招募令:行业大咖干货分享,企业报名开启丨量子位·视点
- Shell之常用小工具(sort、uniq、tr、cut)
- FFmpeg库在win10上配置使用(不配置libx264)
- Go-based web access parameters
- We really need DApp?Really can't meet our fantasy App?
- Report: The number of students who want to learn AI has increased by 200%, and there are not enough teachers
- ABAP 面试题:如何使用 ABAP 编程语言的 System CALL 接口,直接执行 ABAP 服务器所在操作系统的 shell 命令?
- 全面了解什么是TPS、QPS以及两者的区别
猜你喜欢
随机推荐
Flutter入门进阶之旅(五)Image Widget
Resolved IndentationError: unindent does not match any oute r indentation Level
Rust从入门到精通04-数据类型
Flutter入门进阶之旅(四)文本输入Widget TextField
Common gadgets of Shell (sort, uniq, tr, cut)
你没见过的《老友记》镜头,AI给补出来了|ECCV 2022
放下手机吧:实验表明花20分钟思考和上网冲浪同样快乐
Win10 compiles the x264 library (there are also generated lib files)
微信一面:一致性哈希是什么,使用场景,解决了什么问题?
随机快排时间复杂度是N平方?
ABAP 面试题:如何使用 ABAP 编程语言的 System CALL 接口,直接执行 ABAP 服务器所在操作系统的 shell 命令?
Programmer's Exclusive Romance - Use 3D Engine to Realize Fireworks in 5 Minutes
ABAP interview questions: how to use the System CALL interface of the ABAP programming language, direct execution ABAP server operating System's shell command?
二叉树的序列化和反序列化
Here comes the question: Can I successfully apply for 8G memory on a machine with 4GB physical memory?
苹果Meta都在冲的Pancake技术,中国VR团队YVR竟抢先交出产品答卷
Blocking, non-blocking, multiplexing, synchronous, asynchronous, BIO, NIO, AIO all in one pot
8、IDEA提交代码出现: Fetch failed fatal: Could not read from remote repository
世界第4疯狂的科学家,在103岁生日那天去世了
软件测试——金融测试类面试题,看完直接去面试了