WebView injects Js code to realize large image adaptive screen click image preview details

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.