javascript - 如何在 iOS 的 UIWebView 中获取触摸图像数据

Question

在UIWebView中，我想在用户点击网页上的图片时获取图片的html数据。

当我说 html 数据时，我指的是如下数据:

<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;">

就像您在 PC 网络浏览器上使用开发人员工具检查器的方式一样

(事实上，我需要的只是在src=""部分里面，也就是data:image/jpeg;base64,/9j/blahblah//9k= 在上面的例子中)

我能够使用以下代码和 for 循环(循环 i)来抓取所有图像数据:

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

但是，上述方法将 webView 上的所有图像都抓取了，因此当图像过多或按钮图像或广告过多时，无法提供整洁的用户体验。

有没有办法只获取用户触摸的图像数据？

任何想法将不胜感激。

提前致谢!

Answer 1

首先，检查this answer out或 this .

我也在寻找一种从 UIWebView 获取点击图像的方法，但最流行的方法

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

对我没有帮助，因为我只将 html 字符串加载到我的 webview 中，而不是 NSURLRequest。

因此，如果您可以在加载 Web View 之前更改页面 html 代码，则可以使用:

1) 将 jquery-2.1.4.js(或最新的)和 myScripts.js 文件添加到您的项目中，并将它们添加到您的 html 页面代码中:

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];

myScripts.js 的内容:

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

此代码为点击的图像添加“selected”类

2) 将委托(delegate)添加到您的 Controller

<UIGestureRecognizerDelegate>

3) 在 vi​​ewDidLoad 中将点击识别器添加到 uiwebview:

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

4) 添加tapGesture函数和委托(delegate)方法

- (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];
        }
    });
}

此函数获取所选 img 标签的 src 并从所有 img 元素中删除类“selected”。我这里使用了延迟，因为js函数需要一点时间才能完成。