IOS HTML Image Local preview

<span id="Label3"></p>1. Introduction<p><p>I believe that with the use of Apple's children's shoes, will find a lot of news applications, can implement HTML image local preview, then how this is achieved? This article will explain the principles in Depth.</p></p><p><p>About this feature, I also implemented a demo, you can click this to access more detailed content</p></p>2. principle<p><p>People who have been exposed to web development know that interacting with HTML elements is done through javascript, such as clicking, swiping, and so on, such as clicking on the Tag's response code as follows<br></p></p><pre><pre><br><br><br> <br><br> </pre></pre><p><p></p></p><p><p>Thinking down this way, you can extrapolate the local preview of the click image in ios, and it should be interacting with javascript, so the problem is translated into JavaScript and OBJC Interaction. About the interaction between JavaScript and objc, Google's next big pile, It seems very complex, in fact, very simple, I am here to explain briefly, we all know that in iOS with the UIWebView control to display html, then JavaScript and OBJC to achieve interaction, The bridge must be uiwebview, and by looking at the relevant interfaces provided by uiwebview, the following interfaces can be found:</p></p><pre><pre>-(nsstring *) stringbyevaluatingjavascriptfromstring: (nsstring *) script-(BOOL) webView: (uiwebview *) WebView Shouldstartloadwithrequest: (nsurlrequest *) request Navigationtype: (uiwebviewnavigationtype) navigationType;</pre></pre><p><p>The first interface at a glance, that is, the execution of javascript, so that the OBJC to javacript, then JavaScript to OBJC it? The answer is the second interface, because when the HTML clicks on a new link will execute the interface to determine whether to enter the new link, so only the JavaScript to change the href to trigger a second interface call, you can get through the JavaScript to OBJC road, The parameters are, of course, stored in the Request's href.</p></p><p><p>With the understanding of the interaction between JavaScript and objc, there is a small problem: when to execute javascript? View the UIWebView document and find that you can call the following interface</p></p><pre><pre>-(void) webviewdidfinishload: (uiwebview *) webView;</pre></pre>3. Implement<p><p>The following JavaScript code is executed in webviewdidfinishload, with the approximate function of traversing all the < img> elements in the HTML and adding the onclick event, Modify the Window.location.href in the onclick to trigger the UIWebView call WebView:shouldStartLoadWithRequest:navigationType interface, parameter is the SRC attribute of the image-preview:+< img> tag</p></p><pre><pre>function Assignimageclickaction () {var imgs = document.getElementsByTagName (' img '); var length = imgs.length;for (var i = 0 ; I "(here is less than the Number) length; I++) { img = imgs[i]; Img.onclick = function () { window.location.href = ' image-preview: ' + this.src }}}assignimageclickaction ();</pre></pre><p><p>The above JavaScript can be compressed by the actual code as follows</p></p><pre><pre>-(void) webviewdidfinishload: (uiwebview *) webView { [self.webview stringbyevaluatingjavascriptfromstring:@] function assignimageclickaction () {var imgs=document.getelementsbytagname (' img '); var length=imgs.length;for (var i=0 ; I "(here is less than) length;i++) {img=imgs[i];img.onclick=function () {window.location.href= ' image-preview: ' +this.src}}}"]; [self.webview stringbyevaluatingjavascriptfromstring:@ "assignimageclickaction ();"];}</pre></pre><p><p>The following code is triggered when the user clicks</p></p><pre><pre>-(BOOL) webView: (uiwebview *) webView shouldstartloadwithrequest: (nsurlrequest *) Request Navigationtype: ( Uiwebviewnavigationtype) navigationtype { //preview picture if ([request]. Url.scheme isequaltostring:@ "image-preview"]) { nsstring* path = [request]. Url.absolutestring substringfromindex:[@ "image-preview:" length]]; Path = [path stringbyaddingpercentescapesusingencoding:nsutf8stringencoding]; [self.imageview setimagewithurl:[nsurl urlwithstring:path] placeholderimage:[uiimage imageNamed:@ "default"] usingactivityindicatorstyle:uiactivityindicatorviewstylewhite]; [UIView animatewithduration:0.2f animations:^{ self.imageView.alpha = 1.0f; }]; return NO; } Return YES;}</pre></pre>Review<p><p>At this point, you should understand the iOS app click HTML to implement the local preview of the principle, of course, This is only the beginning, you can modify the value of the Window.location.href pass, so as to achieve more functions, such as Tou, large map preview, We can go to [download source here] ( Access more details] (https://github.com/smallmuou/PPHTMLImagePreviewDemo).</p></p> <p style="font-size:12px;"><p style="font-size:12px;">Copyright Notice: This article for Bo Master original article, without Bo Master permission not Reproduced.</p></p> <p><p>IOS HTML Image Local preview</p></p></span>