How to get image data on touch inside UIWebView in

Question

Inside UIWebView, I want to get the html data of the image when the user clicks the image on the web.

When I say html data, I mean data as below:

<img data-sz="f" name="QC6TSb_zoErN3M:" class="rg_i" alt="blahblah" jsaction="load:str.tbn" src="data:image/jpeg;base64,/9j/blahblah//9k=" style="width: 289px; height: 152px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">

just like the way you can do with developer tool inspector on your PC web browser

(In fact, all I need is inside the src="" part, which is data:image/jpeg;base64,/9j/blahblah//9k= in above example)

I was able to scrap all the image data with below code and a for loop (looping i):

self.webView.stringByEvaluatingJavaScriptFromString("var images = document.getElementsByTagName('img');images[\(i)].src.toString();")!)

However, above method scrap all the image on the webView, so when there are too many images or when there are a lot of button image or ads, it fails to provide neat user experience.

Is there a way to just get the data of the image that the user touches?

Any idea will be appreciated.

Thanks in advance!

Answer 1

At first, check this answer out or this.

I've also looked for a way to get tapped image from UIWebView, but most popular method

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

didn't help me, because I loaded only html string into my webview, not NSURLRequest.

So, if you can change page html code before loading web view, you can use this:

1) Add jquery-2.1.4.js (or newest) and myScripts.js files into your project and add them into your html page code:

NSURL* url = [[NSBundle mainBundle] URLForResource:@"jquery-2.1.4" withExtension:@"js"];
NSURL* url2 = [[NSBundle mainBundle] URLForResource:@"myScripts" withExtension:@"js"];

NSString *format = @"<script language=\"javascript\" type=\"text/javascript\" src=\"%@\"></script><script language=\"javascript\" type=\"text/javascript\" src=\"%@\"></script>%@";

NSString *htmlString = [NSString stringWithFormat:format, url, url2, yourBaseHtmlString];

//Load your html into webview 
[_webView loadHTMLString:htmlString baseURL:nil];

The content of myScripts.js:

$(function(){$('img').on('click', function( {
    $(this).addClass('selected')})
});

This code adds the class 'selected' for clicked image

2) Add delegate to your controller

<UIGestureRecognizerDelegate>

3) In viewDidLoad add tap recognizer to uiwebview:

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapGesture:)];
tap.numberOfTouchesRequired = 1;
tap.delegate = self;
[_webView addGestureRecognizer:tap]; 

4) Add tapGesture function and delegate method

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    return YES;
}

- (void)tapGesture:(UITapGestureRecognizer *)sender
{
    double delayInSeconds = 0.4;
    dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));
    dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
        NSString *getByClassScript = @"String(document.getElementsByClassName('selected')[0].src)";
        NSString *src = [self.webView stringByEvaluatingJavaScriptFromString:getByClassScript];
        NSString *removeClassScript = @"$(\".selected\").removeClass();";
        [self.webView stringByEvaluatingJavaScriptFromString:removeClassScript];
        if (src.length > 0) {
            imageUrl = src;
            [self performSegueWithIdentifier:@"showImage" sender:nil];
        }
    });
}

This function gets src of selected img tag and removes class 'selected' from all img elements. I use delay here, because of js function takes a little time to complete.