webView圖片點擊可以實現預覽效果

標籤：http   io   ar   os   java   for   sp   on   art   

　　最近做項目遇到了webview載入後圖片點擊可以實現圖片預覽效果的需求。

　　如果要實現這個需求我們要保證webview和html是互動的否則我們載入的webview上面的圖片是不能實現點擊效果的。那麼如何?互動呢，其實很簡單，我們只需要往調用的webview頁面裡加入一段js代碼就可以了

一：我們建立一個js的方法：

//建立JS

- (NSString *)createJavaScript

{

    NSString *js = @"var imgArray = document.getElementsByTagName(‘img‘);for(var i = 0; i < imgArray.length; i++){var img = imgArray[i];img.onclick=function(){var url=‘lfyprotocol:‘+this.src;document.location = url;}}";

    return js;

}

二：我們在webViewDidFinishLoad實現以下調用就可以了：

 NSString *str = [webView stringByEvaluatingJavaScriptFromString:[self createJavaScript]];

 NSLog(@"--------finish=%@",str);

三：圖片實現點擊效果之後的實現方法要在

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType這個方法中實現

按照前兩步執行，我們在這個方法中NSLog(@"圖片是可點擊的"); 我們會很愉快的發現我們成功的輸出了內容。

四：當然我們要的不僅僅是輸圖片可點的訊息，

 NSString *requestURL = [[request URL] absoluteString] ;

        NSArray *components = [requestURL componentsSeparatedByString:@":"];

        NSLog(@"%@",components);

        if ([components count]>1&&[(NSString *)[components objectAtIndex:0] isEqualToString:@"lfyprotocol"]) {

            if ([(NSString *)[components objectAtIndex:1] isEqualToString:@"http"]||[(NSString *)[components objectAtIndex:1] isEqualToString:@"https"] ) {

                            //圖片的路徑

                           NSString *path = [NSString stringWithFormat:@"%@:%@",[components objectAtIndex:1],[components objectAtIndex:2]];

                            NSLog(@"%@",path);

                          UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"圖片地址" message:path delegate:self cancelButtonTitle:nil otherButtonTitles:@"OK", nil];

                            [alert show];

                            [alert release];

                            NSLog(@"%@",self.imgConArray);

                            for (int i = 0; i < [self.imgConArray count]; i++) {

                                NSString *url = [[imgConArray objectAtIndex:i] objectForKey:@"data-original"];

                                NSString *astring = [[imgConArray objectAtIndex:i] objectForKey:@"title"];

                                NSLog(@"-----%@-----%@----",url,astring);

                            }

}

通過這個方法我們的圖片url就成功的擷取到了，當然這隻是擷取到的我們所點擊的圖片的路徑，如果你想擷取到html裡面所有的圖片url那麼：

你需要對html進行遍曆：

abRequest =[[NSURLRequest requestWithURL:[NSURL URLWithString:self.URLString]] retain];

 

NSData *ceResponse = [NSURLConnection sendSynchronousRequest:abRequest returningResponse:nil error:nil];

        TFHpple *doc = [[TFHpple alloc] initWithHTMLData:ceResponse];

        NSArray *images = [doc searchWithXPathQuery:@"//img"];

        for (int i = 0; i < [images count]; i ++) {

            TFHppleElement *dic = [images objectAtIndex:i];

            NSString *imgUrl = [dic objectForKey:@"data-original"];

            NSLog(@"%@=====",imgUrl);

            NSString *imgTitle = [dic objectForKey:@"title"];

            

            [self.imgConArray addObject:imgUrl];

            [self.titleArray addObject:imgTitle];

        }

 這個方法中我們用到了一個第三方的類TFHpple我們用它對html進行遍曆。相信擷取到所有圖片的連結之後的預覽對你來說就是小菜一碟了。如果你有點懶不想寫的話推薦你一個第三類MWPhotoBrowser，他可以很好地幫你實現預覽圖片的效果。

 

webView圖片點擊可以實現預覽效果