Deep interaction between UIWebView and JS

[[145431]]

The cause of the matter is still driven by project requirements. After two days of tossing, since I had no experience in UIWebView and JS interaction before, and I think this time the function has a certain degree of creativity, I hereby leave a little text for future review.

I want to achieve such a requirement: display a string of text with HTML format only in the body part obtained from the network according to the local CSS file, and I need to spell the complete HTML myself. In addition, I also need to disable the automatic loading of the "img" tag in the obtained HTML text, and put the operation of downloading pictures on the native side to handle, and return the address of the picture in the cache to UIWebview through JS.

The advantages of putting image operations on the native side are: 1. It can be cached locally, and the next time you enter this article, you can read it directly from the cache, which improves the response speed and saves user traffic. 2. It can realize operations such as clicking on the image to enlarge it, saving the image to the album, etc.

There are two technical difficulties: 1. How to disable the loading of images when HTML text is onLoad and get images from the local server? 2. How to return the images downloaded from the native server to the web page?

At first, I was at a loss. I looked through the documentation and only found a method - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script to interact with JS. I failed to achieve my goal until I saw WebViewJavascriptBridge, a wrapper library for UIWebView/WebViews and JS interaction on Github.

When I first saw the sample, I was almost confused by all the callbacks. I never hide my stupidity, so I drew a relationship diagram. Before showing the diagram, let's look at the code first.

At the beginning, we initialized both the Native side and the JS side separately:

OC side:

 @property WebViewJavascriptBridge* bridge;

The corresponding initialization code is as follows, which directly includes a callback for receiving JS:

 _bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {
 NSLog(@ "ObjC received message from JS: %@" , data);
 responseCallback(@ "Response for message from ObjC" );
 }];

JS side: (The following is a fixed way of writing, your own JS file must contain the following code)

 function connectWebViewJavascriptBridge(callback) {
 if (window.WebViewJavascriptBridge) {
 callback(WebViewJavascriptBridge)
 } else {
 document.addEventListener( 'WebViewJavascriptBridgeReady' , function() {
 callback(WebViewJavascriptBridge)
 }, false )
 }
 }
 connectWebViewJavascriptBridge(function(bridge) {
 bridge.init(function(message, responseCallback) {
 log( 'JS got a message' , message)
 var data = { 'Javascript Responds' : 'Wee!' }
 log( 'JS responding with' , data)
 responseCallback(data)
 })
 }

Then, we need to know that in WebViewJavascriptBridge, there are only two ways of interaction: send and callHandle. Both JS and OC have these two methods, so the corresponding four relationships are:

The interpretation of the corresponding relationship in the above table is, for example, the first item: if bridge.send() is called in JS, the callback in the _bridge initialization method on the OC side will be triggered.

Similarly, in the second line, bridge.callHandler('testJavascriptHandler') is called in JS, which will trigger the method of the same name registered on the OC side:

 bridge.registerHandler( 'testJavascriptHandler' , function(data, responseCallback) {
 log( 'ObjC called testJavascriptHandler with' , data)
 var responseData = { 'Javascript Says' : 'Right back atcha!' }
 log( 'JS responding with' , responseData)
 responseCallback(responseData)
 })

Now that we know the usage rules, let's take a look at the overall idea of ​​applying it in our actual needs:

—— 1 ——

First, the first step we need to do is to replace the default src in the obtained HTML text to prevent it from automatically loading the image.

 NSString *_content = [contentstring stringByReplacingOccurrencesOfString:@ "src" withString:@ "esrc" ];

—— 2 ——

Because we only get the body part of the HTML, we need to write the complete HTML ourselves.

We call the onLoaded() function in JS when "body onload="onLoaded()". In this function, we traverse the esrc of all img tags, save them as an array and return them to the OC side, so that the native side can download these images.

 function onLoaded() {
 connectWebViewJavascriptBridge(function(bridge) {
 var allImage = document.querySelectorAll( "img" );
 allImage = Array.prototype.slice.call(allImage, 0 );
 var imageUrlsArray = new Array();
 allImage.forEach(function(image) {
 var esrc = image.getAttribute( "esrc" );
 var newLength = imageUrlsArray.push(esrc);
 });
 bridge.send(imageUrlsArray);
 });
 }

—— 3 ——

bridge.send will trigger the handler in WebViewJavascriptBridge initialization method + (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView webViewDelegate:(WVJB_WEBVIEW_DELEGATE_TYPE*)webViewDelegate handler:(WVJBHandler)handler; We download all the images in the block of the handler and return the address of the downloaded image in the cache to JS.

 #pragma mark -- Download all images
 -( void )downloadAllImagesInNative:(NSArray *)imageUrls{
 SDWebImageManager *manager = [SDWebImageManager sharedManager];
 // Initialize an array of empty elements  
 _allImagesOfThisArticle = [NSMutableArray arrayWithCapacity:imageUrls.count]; //A local array for saving all images  
 for (NSUInteger i = 0 ; i < imageUrls.count- 1 ; i++) {
 [_allImagesOfThisArticle addObject:[NSNull null ]];
 }
 for (NSUInteger i = 0 ; i < imageUrls.count- 1 ; i++) {
 NSString *_url = imageUrls[i];
 [manager downloadImageWithURL:[NSURL URLWithString:_url] options:SDWebImageHighPriority progress:nil completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
 if (image) {
 dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0 ), ^{
 NSString *imgB64 = [UIImageJPEGRepresentation(image, 1.0 ) base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
 //Pass the address of the image on disk back to JS  
 NSString *key = [manager cacheKeyForURL:imageURL];
 NSString *source = [NSString stringWithFormat:@ "data:image/png;base64,%@" , imgB64];
 [_bridge callHandler:@ "imagesDownloadComplete" data:@[key,source]];
 });
 }
 }];
 }
 }

—— 4 ——

[_bridge callHandler:@"imagesDownloadComplete" data:@[key,source]] will trigger the function imagesDownloadComplete() in JS. In this function, all img tags are traversed and the passed image address is assigned to the src of img.

 function imagesDownloadComplete(pOldUrl, pNewUrl) {
 var allImage = document.querySelectorAll( "img" );
 allImage = Array.prototype.slice.call(allImage, 0 );
 allImage.forEach(function(image) {
 if (image.getAttribute( "esrc" ) == pOldUrl || image.getAttribute( "esrc" ) == decodeURIComponent(pOldUrl)) {
 image.src = pNewUrl;
 }
 });
 }

At this point, the download operation of local processing of web page images is basically completed through WebViewJavascriptBridge processing UIWebView and JS interaction. This example shows a complete process, which basically involves various interactions between JS and OC, including OC calling JS, JS calling OC, etc. If you have other business needs, you can basically follow this process, the only difference is the business logic.

Let me give you another example. It also appears in my business needs. When you click on a picture on a web page, the picture will be enlarged with a Zoom-out animation. You can slide left and right to view other pictures. At the same time, you also need to double-click to enlarge and save the picture. It's like this:

At first glance, we clicked on a picture on a web page. How is it possible to make this picture pop up alone? And also slide left and right to display other pictures?

First of all, we still need to transform the HTML text obtained from the network, match the img esrc=http://...., add an onClick event, bind a JS method, and pass this esrc as a parameter to the bound method.

 //Regular replacement   
 
 NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:@ "(《img[^》]+esrc=\")(\\S+)\"" options: 0 error:nil]; 
 
 result = [regex stringByReplacingMatchesInString:newContent options: 0 range:NSMakeRange( 0 , newContent.length) withTemplate:@ "《img esrc=\"$2\" onClick=\"javascript:onImageClick('$2')\"" ];

The onImageClick() function in JS. The main task of this function is to obtain the number of the clicked image among all the images and the position in the current screen, and return this information to OC.

 function onImageClick(picUrl){
 connectWebViewJavascriptBridge(function(bridge) {
 var allImage = document.querySelectorAll( "p img[esrc]" );
 allImage = Array.prototype.slice.call(allImage, 0 );
 var urls = new Array();
 var index = - 1 ;
 var x = 0 ;
 var y = 0 ;
 var width = 0 ;
 var height = 0 ;
 allImage.forEach(function(image) {
 var imgUrl = image.getAttribute( "esrc" );
 var newLength = urls.push(imgUrl);
 if (imgUrl == picUrl || imgUrl == decodeURIComponent(picUrl)){
 index = newLength - 1 ;
 x = image.getBoundingClientRect().left;
 y = image.getBoundingClientRect().top;
 x = x + document.documentElement.scrollLeft;
 y = y + document.documentElement.scrollTop;
 width = image.width;
 height = image.height;
 console.log( "x:" +x + ";y:" + y+ ";width:" +image.width + ";height:" +image.height);
 }
 });
 console.log( "Click detected" );
 bridge.callHandler( 'imageDidClicked' , { 'index' :index, 'x' :x, 'y' :y, 'width' :width, 'height' :height}, function(response) {
 console.log( "JS has sent imgurl and index, and received a callback, indicating that OC has received the data" );
 });
 });
 }

bridge.callHandler will trigger [_bridge registerHandler:@"imageDidClicked" handler:^(id data, WVJBResponseCallback responseCallback){}] in OC. We can get the number of the clicked image passed by JS in all images, as well as the spatial position of the clicked image in the current image in the handler. To achieve the Zoom-out effect of clicking an image, we must be good at "cheating". The images on the web page cannot "jump" out to enlarge, but we can create a UIImageView based on the x, y, width, height position information passed back by JS. The image is consistent with the current clicked image, set the transparency to 0, and add it to UIWebView. And realize image browsing through the open source library IDMPhotoBrowser.

 [_bridge registerHandler:@ "imageDidClicked" handler:^(id data, WVJBResponseCallback responseCallback) {
 NSInteger index = [[data objectForKey:@ "index" ] integerValue];
 CGFloat originX = [[data objectForKey:@ "x" ] floatValue];
 CGFloat originY = [[data objectForKey:@ "y" ] floatValue];
 CGFloat width = [[data objectForKey:@ "width" ] floatValue];
 CGFloat height = [[data objectForKey:@ "height" ] floatValue];
 tappedImageView.alpha = 0 ;
 tappedImageView.frame = CGRectMake(originX, originY, width, height);
 tappedImageView.image = _allImagesOfThisArticle[index]; //_allImagesOfThisArticle is a local array used to store all images  
 NSLog(@ "OC has received JS's imageDidClicked: %@" , data);
 responseCallback(@ "OC has received JS's imageDidClicked" );
 //Click to enlarge the image  
 [self presentPhotosBrowserWithInitialPage:index animatedFromView:tappedImageView];
 }];

Tips

Since I use Sublime Text, I can't debug JS. If I use Atom to debug, it feels a bit overkill. I just want a place where I can easily see whether console.log is printed or whether JS function is called. Always believe that any problem can be solved. We can use Safari.

Connect your iPhone or use the simulator. When your program currently displays a UIWebView, Safari will automatically recognize this UIWebview and you can find your device in the development menu bar for debugging.

Select the console, and you can see the long-lost debugging window and JS's console.log.

The above is an example of using WebViewJavascriptBridge for deep interaction between UIWebView and JS.

After working on WebViewJavascriptBridge for a few days, my biggest feeling is that learning never ends. Thinking about the fact that Node.JS can write servers, React Native can develop iOS, and the most popular language on Github is JS, I want to learn JS again. But I calmed down and made clear my main tasks. I didn't even understand Swift, so how could I have time to work on the front end? According to my experience, if I sleep well, I probably won't have this idea tomorrow^-^