Some simple interactions on iOS Development-webview
Last Update:2015-12-30
Source: Internet
Author: User
<span id="Label3"></p><p><p>1. Achieve the equal-ratio scaling of WebView Tablets.</p></p><pre><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">called when the webview load is complete</span></span><span style="color: #000000;"><span style="color: #000000;">[webView stringbyevaluatingjavascriptfromstring:</span></span><span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">var script = document.createelement (' script ');</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">script.type = ' Text/javascript ';</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">script.text = \ "function resizeimages () {</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">var myimg,oldwidth;</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">var maxwidth = 300.0;</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">the width of the picture displayed in the UIWebView</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;">for <span style="color: #800000;">(i=0;i <document.images.length;i++) {</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">myimg = document.images[i];</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">if (myimg.width > Maxwidth) {</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">oldwidth = myimg.width;</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">myimg.width = maxwidth;</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">}</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">}</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">}\";</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">document.getelementsbytagname (' head ') [0].appendchild (script);</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">]; [webView stringbyevaluatingjavascriptfromstring:</span></span><span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">resizeimages (); "];</span></span></pre><p><p>Note: Be sure to WebView when the load is completed when the call, if you have to start the display after the call interface you can also webview loaded when the WebView hidden, after the call is displayed on the LINE.</p></p><p><p>2. Change webview font size, font color, background color, etc.</p></p><pre><span style="color: #008000;"><span style="color: #008000;"> //</span></span><span style="color: #008000;"><span style="color: #008000;">Font Size</span></span><span style="color: #000000;"><span style="color: #000000;">[webView stringbyevaluatingjavascriptfromstring:</span></span><span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">document.getelementsbytagname (' body ') [0].style.webkittextsizeadjust= ' 330% '</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">]; </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Font Color</span></span><span style="color: #000000;"><span style="color: #000000;">[webView stringbyevaluatingjavascriptfromstring:</span></span><span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">document.getelementsbytagname (' body ') [0].style.webkittextfillcolor= ' gray '</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">]; </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Page background Color</span></span><span style="color: #000000;"><span style="color: #000000;">[webView stringbyevaluatingjavascriptfromstring:</span></span><span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">document.getelementsbytagname (' body ') [0].style.background= ' #2E2E2E '</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>];</pre><p><p>Note: This will also be called when the webview load is Complete.</p></p><p><p></p></p><p><p>3.webView Monitor Click picture Event</p></p><pre>-(BOOL) webView: (uiwebview *) webView shouldstartloadwithrequest: (nsurlrequest *<span style="color: #000000;"><span style="color: #000000;">Request Navigationtype: (uiwebviewnavigationtype) Navigationtype {</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>([request. Url.scheme isequaltostring:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Image-preview</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">]) {nsstring</span></span>* Path = [request. Url.absolutestring substringfromindex:[<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Image-preview:</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">length]]; Path</span></span>= [path stringbyaddingpercentescapesusingencoding:nsutf8stringencoding];<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">path is the image URL we get when we click on the image, and then you can do the code you want to execute after you click here</span> .</span> <span style="color: #0000ff;"><span style="color: #0000ff;">return</span></span><span style="color: #000000;"><span style="color: #000000;">NO; } </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">return</span></span><span style="color: #000000;"><span style="color: #000000;">YES;}</span></span>- (<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>) webviewdidfinishload: (uiwebview *<span style="color: #000000;"><span style="color: #000000;">) WebView {[webView stringbyevaluatingjavascriptfromstring:</span></span><span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">function assignimageclickaction () {var imgs=document.getelementsbytagname (' img '); var length=imgs.length;for ( var i=0;i<length;i++) {img=imgs[i];img.onclick=function () {window.location.href= ' image-preview: ' +this.src}}} </span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">]; [webView stringbyevaluatingjavascriptfromstring:</span></span><span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">assignimageclickaction ();</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">];}</span></span></pre><p><p>Usually this can be achieved by clicking on the picture full screen view.</p></p><p><p>Some simple interactions on iOS Development-webview</p></p></span>
