Search code examples
javascripthtmliosuiwebviewuiwebviewdelegate

Detect tapped image inside UIWebView


I have a web view showing an html + js intro done by someone else. When user taps on a specific image i need to perform a segue. I don't know javascript. If I try with .src returns empty, if try with .innerHTML always return a lot of code. How can I detect this specific touch? Thank you.

- (void)viewDidLoad
{
    [super viewDidLoad];
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(viewTapped:)];
    [tap setDelegate:self];
    [self.webView.scrollView addGestureRecognizer:tap];

    NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"myFile" ofType:@"html" inDirectory:@"myDir"];
    NSURL* url = [[NSURL alloc]initFileURLWithPath:htmlFile];
    NSURLRequest* request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
}
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    return YES;
}
-(void)viewTapped:(UITapGestureRecognizer*)tap {
    CGPoint touchPoint = [tap locationInView:self.webView];
    NSString *js = [NSString stringWithFormat:@"document.elementFromPoint(%f, %f).src", touchPoint.x, touchPoint.y];
    NSString *urlToSave = [self.webView stringByEvaluatingJavaScriptFromString:js];
//Returning an empty string
    if (urlToSave.length > 0) {
          [self performSegueWithIdentifier:@"introToMain" sender:self];
    }

}

Solution

  • I think you should make your image in html clickable. If it is, just ignore this. Then you should use shouldStartLoadWithRequest delegate method of UIWebView like this:

    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    
    
        if (navigationType == UIWebViewNavigationTypeLinkClicked){
    
            NSURL *url = request.URL;
            //Maybe you can detect the image here looking to the url.
    
        }
    
        return YES;
    
    }