iOS開發－webView上的一些簡單交互

1.實現webView上圖片的等比縮放。

//在webview加載完成時調用
[webView stringByEvaluatingJavaScriptFromString:
     @"var script = document.createElement('script');"
     "script.type = 'text/javascript';"
     "script.text = \"function ResizeImages() { "
     "var myimg,oldwidth;"
     "var maxwidth = 300.0;" // UIWebView中顯示的圖片寬度
     "for(i=0;i <document.images.length;i++){"
     "myimg = document.images[i];"
     "if(myimg.width > maxwidth){"
     "oldwidth = myimg.width;"
     "myimg.width = maxwidth;"
     "}"
     "}"
     "}\";"
     "document.getElementsByTagName('head')[0].appendChild(script);"];
    [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();」];

注意：必定要再webView加載完成的時候調用，若是你必定要一開始的顯示調用後的界面你也能夠再webView加載的時候將webView隱藏，登調用完以後在顯示就好了。

2.改變webView的字體大小，字體顏色，背景顏色等

    //字體大小

    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '330%'"];

    //字體顏色

    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= 'gray'"];

    //頁面背景色

    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.background='#2E2E2E'"];

注意：這個也要在webView加載完成的時候調用。

 

3.webView監聽點擊圖片事件

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

    if ([request.URL.scheme isEqualToString:@"image-preview"]) {

        NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];

        path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];//path就是咱們點擊圖片後獲得的圖片URL，而後你能夠在這裏作你點擊以後要執行的代碼

        return NO;

    }

    return YES;

}

- (void)webViewDidFinishLoad:(UIWebView *)webView {

    [webView stringByEvaluatingJavaScriptFromString:@"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}}}"];

    [webView stringByEvaluatingJavaScriptFromString:@"assignImageClickAction();"];

}

一般用這個能夠實現點擊圖片全屏查看。