How to get image data on touch inside UIWebView in

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!

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.