iOS【webView 加载微信文章注入JS实现交互 浏览图片及保存】
2017-09-11 00:20
716 查看
最近项目某个模块中要求可以实现对网页中图片的查看,并要求在多张图片的情况下可以实现滑动浏览。
所以,问题的集中点就是如何获取所有的图片地址及添加图片的点击事件。不多说,直接上码!
在网页加载完成时,通过js获取图片和添加点击的识别方式
//在这个方法中捕获到图片的点击事件和被点击图片的url
后记:js挺好玩,我相信以后还会去多接触它。
所以,问题的集中点就是如何获取所有的图片地址及添加图片的点击事件。不多说,直接上码!
在网页加载完成时,通过js获取图片和添加点击的识别方式
- (void)webViewDidFinishLoad:(UIWebView *)webView { [IDProgressHUD IDPlaceViewHideDirect:self.view]; //这里是js,主要目的实现对url的获取 static NSString * const jsGetImages = @"function getImages(){\ var objs = document.getElementsByTagName(\"img\");\ var imgScr = '';\ for(var i=0;i<objs.length;i++){\ imgScr = imgScr + objs[i].src + '+';\ };\ return imgScr;\ };"; [webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法 NSString *urlResurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"]; mUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]]; if (mUrlArray.count >= 2) { [mUrlArray removeLastObject]; } //urlResurlt 就是获取到得所有图片的url的拼接;mUrlArray就是所有Url的数组 //添加图片可点击js [mWebView stringByEvaluatingJavaScriptFromString:@"function registerImageClickAction(){\ var imgs=document.getElementsByTagName('img');\ var length=imgs.length;\ for(var i=0;i<length;i++){\ img=imgs[i];\ img.onclick=function(){\ window.location.href='image-preview:'+this.src}\ }\ }"]; [mWebView stringByEvaluatingJavaScriptFromString:@"registerImageClickAction();"]; }
//在这个方法中捕获到图片的点击事件和被点击图片的url
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { //预览图片 if ([request.URL.scheme isEqualToString:@"image-preview"]) { NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]]; path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; //path 就是被点击图片的url return NO; } return YES; }
以下是保存所在作用域的图片
//添加长按事件 UILongPressGestureRecognizer *longPressed = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressed:)]; longPressed.minimumPressDuration = 0.3; longPressed.delegate = self; [webView addGestureRecognizer:longPressed]; /** 获取长按事件所在的位置图片 */ - (void)longPressed:(UILongPressGestureRecognizer*)recognizer { if (recognizer.state != UIGestureRecognizerStateBegan) { return; } CGPoint touchPoint = [recognizer locationInView:_webView]; NSString *imgURL = [NSString stringWithFormat:@"document.elementFromPoint(%f, %f).src", touchPoint.x, touchPoint.y]; NSString *webImage = [_webView stringByEvaluatingJavaScriptFromString:imgURL]; if([webImage rangeOfString:@"player"].location !=NSNotFound || webImage.length == 0){ return; } [self showImageOptionsWithUrl:webImage]; } - (void)showImageOptionsWithUrl:(NSString *)imageUrl { _webImageURL = imageUrl; IBActionSheet *standardIBAS = [[IBActionSheet alloc] initWithTitle:nil delegate:self cancelButtonTitle:@"取消" destructiveButtonTitle:@"保存图片" otherButtonTitles:nil]; [standardIBAS setFont:FontWithSize(SIZE_FONT_CONTENT)]; [standardIBAS setTitleFont:FontWithSize(SIZE_FONT_SUBCONTENT)]; [standardIBAS setButtonTextColor:[UIColor blackColor]]; [standardIBAS showInView:self.navigationController.view]; } #pragma mark - IBActionSheetDelegate -(void)actionSheet:(IBActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex{ if (buttonIndex == 0) { NSURL *url = [NSURL URLWithString:_webImageURL]; NSURLSessionConfiguration * configuration = [NSURLSessionConfiguration defaultSessionConfiguration]; NSURLSession *session = [NSURLSession sessionWithConfiguration:configuration delegate:self delegateQueue:[NSOperationQueue new]]; NSURLRequest *imgRequest = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestReturnCacheDataElseLoad timeoutInterval:30.0]; NSURLSessionDownloadTask *task = [session downloadTaskWithRequest:imgRequest completionHandler:^(NSURL * _Nullable location, NSURLResponse * _Nullable response, NSError * _Nullable error) { if (error) { return ; } NSData * imageData = [NSData dataWithContentsOfURL:location]; dispatch_async(dispatch_get_main_queue(), ^{ UIImage * image = [UIImage imageWithData:imageData]; UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), NULL); }); }]; [task resume]; } }
后记:js挺好玩,我相信以后还会去多接触它。
相关文章推荐
- iOS开发,webView加载图片, js交互, 点击图片放大
- 进击的KFC:iOS WebView 如何通过js获取网页中所有图片并加入点击事件,实现浏览图片的功能
- iOS WebView 如何通过js获取网页中所有图片并加入点击事件,实现浏览图片的功能
- iOS Webview使用js获取图url,实现图片浏览的功能
- Android实现点击WebView界面中图片滑动浏览与保存图片功能
- iOS OC与JS的交互(WebViewJavascriptBridge实现)
- iOS 加载js获取webView中图片url
- iOS 基于JavaScriptCore 不等webView加载完毕就交互,网页获取原生内容。 webView的高级用法之JS交互,js与oc的相互调用
- iOS开发使用WebViewJavascriptBridge实现OC与JS交互
- iOS用WKWebView与JS交互获取系统图片及WKWebView的Alert,Confirm,TextInput的监听代理方法使用,屏蔽WebView的可选菜单
- iOS WebView 图片点击放大并左右滑动,类似微信/网易文章功能
- 【iOS】WebView加载HTML图片大小自适应与文章自动换行
- Android 通过注入js实现读取webview中图片并放大的优化
- [iOS] 使用WebViewJavascriptBridge实现OC与JS交互
- ios webView与js交互与类似回调的实现(swift)
- Android 中 WebView 与 js 简单交互实现图文混排效果,解决图片自适应屏幕与查看大图问题
- iOS开发——WebView加载HTML图片大小自适应与文章自动换行
- [iOS] 使用WebViewJavascriptBridge实现OC与JS交互
- iOS用WKWebView与JS交互获取系统图片及WKWebView的Alert,Confirm,TextInput的监听代理方法使用,屏蔽WebView的可选菜单
- iOS 8 WkWebView 网页的配置和前进,后退,js 交互和进度条的加载