iOS用WKWebView与JS交互获取系统图片及WKWebView的Alert,Confirm,TextInput的监听代理方法使用，屏蔽WebView的可选菜单

最新推荐文章于 2024-02-27 15:39:33 发布

zhuweideng

最新推荐文章于 2024-02-27 15:39:33 发布

阅读量3.7k

点赞数

分类专栏： IOS/OC代码

IOS/OC代码专栏收录该内容

123 篇文章 0 订阅

订阅专栏

http://blog.csdn.net/boyqicheng/article/details/52812968

最近做一个项目，开始是使用WebView与JS交互的，由于内存管理方面WebView欠佳。WKWebVIew的内存线程管理好，所以选择使用 WKWebVIew(使用WKWebView 的缺点在于，这个控件加载的H5页面不支持ajax请求，所以需要自己把网络请求在OC上实现)。

一、首先说下应该注意的问题：

1.要获取拍照或相册的图片，如果是iOS 10系统，需要设置访问权限（在 Info-plist 中设置）

相机权限： Privacy - Camera Usage Description 是否允许此App使用你的相机？
相册权限： Privacy - Photo Library Usage Description 是否允许此App访问你的媒体资料库？

2.WebView和WKWebView和JS互调的方法和使用的传参类型不同

WebView 使用（window.iosModel.getImage(JSON.stringify(parameter)); //JSON.stringify(参数字符串) 这个方法是把字符串转换成json字符串 parameter是参数字符串
）传值给 OC

WKWebView 使用（window.webkit.messageHandlers.iosModel.postMessage(parameter)）

3.需要特别注意的是：WKWebView 不执行JS写的 ajax请求（WKWebView 可能由于基于 WebKit，并不会执行 C socket 相关的函数对 HTTP 请求进行处理）如果有网络请求，需要自己用OC实现

4.使用的时候不要忘记挂上使用到的代理，和导入代理

[objc]view plaincopy 
   
 @interface ViewController () <WKScriptMessageHandler, WKNavigationDelegate, WKUIDelegate,UINavigationControllerDelegate,UIImagePickerControllerDelegate>  

5.屏蔽WebView的可选菜单（即不会出现拷贝、全选等弹出菜单）在加载完成后的代理中执行以下两段JS

[objc]view plaincopy 
   
 // 导航完成时，会回调（也就是页面载入完成了）  
 - (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation {  
     NSLog(@"66===%s", __FUNCTION__);  
     // 禁用选中效果  
     [self.webView evaluateJavaScript:@"document.documentElement.style.webkitUserSelect='none'" completionHandler:nil];  
     [self.webView evaluateJavaScript:@"document.documentElement.style.webkitTouchCallout='none'" completionHandler:nil];  
 }  

二、代码：

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
     <head>  
         <meta charset="UTF-8">  
         <title></title>  
     </head>  
     <body>  
         <div>  
             <h3>JS与iOS交互</h3>  
             <h4>JS页面获取iOS系统图片</h5>  
         </div>  
         <div>  
             <input type = "button" style="width: 50%;height: 5%;" id="Button" value="打开相机获取图片" onclick="getIOSImage()"></button>  
         </div><dir />  
         <div>  
             <img src="testImage.png" id="changeImage"style="width: 30%; height: 30%;" onclick="getIOSImage()"><!--src="图片的相对路径" 如果把html文件导入工程中，图片路径和OC一样只写图片名字和后缀就可以，（记得要先把图片添加到工程） 图片也可以实现按钮的方法getIOSImage -->  
         </div>  
         <span id="iosParame" style="width: 200px; height: 50%; color:orangered; font-size:15px" value="等待获取ios参数" >  
             </div>  
         <script>  
             var getIOSImage = function(){  
                 var parameter = {'title':'JS调OC','describe':'这里就是JS传给OC的参数'};  
                 // 在下面这里实现js 调用系统原生api iosDelegate  
                 //JSON.stringify(参数字符串) 这个方法是 把字符串转换成json字符串  
     window.iosDelegate.getImage(JSON.stringify(parameter));// 实现数据的 json 格式字符串  
             }  
         // 这里是 iOS调用js的方法  
         function setImageWithPath(arguments){  
             document.getElementById('changeImage').src = arguments['imagePath'];  
             document.getElementById('iosParame').innerHTML = arguments['iosContent'];  
         }  
         </script>  
     </body>  
 </html>  

[objc]view plaincopy 
   
 <pre name="code" class="objc">#import "ViewController.h"  
 #import <JavaScriptCore/JavaScriptCore.h>  
 #import <WebKit/WebKit.h>  
 #import "SaveImage_Util.h"  
   
 @interface ViewController () <WKScriptMessageHandler, WKNavigationDelegate, WKUIDelegate,UINavigationControllerDelegate,UIImagePickerControllerDelegate>  
   
 @property (nonatomic, strong) WKWebView *webView;  
 @property (nonatomic, strong) UIProgressView *progressView;  
   
 @end  
   
 @implementation ViewController  
 {  
     int indextNumb;// 交替图片名字  
     UIImage *getImage;//获取的图片  
 }  
 - (void)viewDidLoad {  
   [super viewDidLoad];  
     
   self.edgesForExtendedLayout = UIRectEdgeNone;  
   self.automaticallyAdjustsScrollViewInsets = NO;  
     
   WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];  
   // 设置偏好设置  
   config.preferences = [[WKPreferences alloc] init];  
   // 默认为0  
   config.preferences.minimumFontSize = 10;  
   // 默认认为YES  
   config.preferences.javaScriptEnabled = YES;  
   // 在iOS上默认为NO，表示不能自动通过窗口打开  
   config.preferences.javaScriptCanOpenWindowsAutomatically = NO;  
   
   
   // web内容处理池  
   config.processPool = [[WKProcessPool alloc] init];  
   
   // 通过JS与webview内容交互  
   config.userContentController = [[WKUserContentController alloc] init];  
   // 注入JS对象名称AppModel，当JS通过AppModel来调用时，  
   // 我们可以在WKScriptMessageHandler代理中接收到  
   [config.userContentController addScriptMessageHandler:self name:@"iosModel"];  
   
   
   
         //通过默认的构造器来创建对象  
   self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];  
     // 导航代理  
     self.webView.navigationDelegate = self;  
     // 与webview UI交互代理  
     self.webView.UIDelegate = self;  
   NSURL *path = [[NSBundle mainBundle] URLForResource:@"testJS" withExtension:@"html"];  
   [self.webView loadRequest:[NSURLRequest requestWithURL:path]];  
   [self.view addSubview:self.webView];  
     
     
   
   // 添加KVO监听  
   [self.webView addObserver:self  
                  forKeyPath:@"loading"  
                     options:NSKeyValueObservingOptionNew  
                     context:nil];  
   [self.webView addObserver:self  
                  forKeyPath:@"title"  
                     options:NSKeyValueObservingOptionNew  
                     context:nil];  
   [self.webView addObserver:self  
                  forKeyPath:@"estimatedProgress"  
                     options:NSKeyValueObservingOptionNew  
                     context:nil];  
   
   // 添加进入条  
   self.progressView = [[UIProgressView alloc] init];  
   self.progressView.frame = self.view.bounds;  
   [self.view addSubview:self.progressView];  
   self.progressView.backgroundColor = [UIColor blackColor];  
     
   self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"后退" style:UIBarButtonItemStyleDone target:self action:@selector(goback)];  
   self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"前进" style:UIBarButtonItemStyleDone target:self action:@selector(gofarward)];  
 }  
   
 - (void)goback {  
   if ([self.webView canGoBack]) {  
     [self.webView goBack];  
   }  
 }  
   
 - (void)gofarward {  
   if ([self.webView canGoForward]) {  
     [self.webView goForward];  
   }  
 }  
   
 #pragma mark - WKScriptMessageHandler  
 // 通过这个方法获取 JS传来的json字符串  
 - (void)userContentController:(WKUserContentController *)userContentController  
       didReceiveScriptMessage:(WKScriptMessage *)message  
 {  
   if ([message.name isEqualToString:@"iosModel"]) {  
     // 打印所传过来的参数，只支持NSNumber, NSString, NSDate, NSArray,  
     // NSDictionary, and NSNull类型  
       NSLog(@"JS传来的json字符串 ：  %@", message.body);  
       NSDictionary *jsDictionary = message.body;  
       if ([jsDictionary[@"means"] isEqualToString:@"获取系统图片"])  
       {  
           [self beginOpenPhoto];  
       }  
   }  
 }  
   
 #pragma mark - KVO  
 - (void)observeValueForKeyPath:(NSString *)keyPath  
                       ofObject:(id)object  
                         change:(NSDictionary<NSString *,id> *)change  
                        context:(voidvoid *)context {  
   if ([keyPath isEqualToString:@"loading"]) {  
     NSLog(@"loading");  
   } else if ([keyPath isEqualToString:@"title"]) {  
     self.title = self.webView.title;  
   } else if ([keyPath isEqualToString:@"estimatedProgress"]) {  
     NSLog(@"progress: %f", self.webView.estimatedProgress);  
     self.progressView.progress = self.webView.estimatedProgress;  
   }  
   if (!self.webView.loading) {  
     [UIView animateWithDuration:0.5 animations:^{  
       self.progressView.alpha = 0;  
     }];  
   }  
 }  
   
 #pragma mark - WKNavigationDelegate  
     // 请求开始前，会先调用此代理方法  
     // 与UIWebView的  
     // - (BOOL)webView:(UIWebView *)webView  
     // shouldStartLoadWithRequest:(NSURLRequest *)request  
     // navigationType:(UIWebViewNavigationType)navigationType;  
     // 类型，在请求先判断能不能跳转（请求）  
   
 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:  
 (WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {  
   NSString *hostname = navigationAction.request.URL.host.lowercaseString;  
   if (navigationAction.navigationType == WKNavigationTypeLinkActivated  
       && ![hostname containsString:@".lanou.com"]) {  
 // 对于跨域，需要手动跳转， 用系统浏览器（Safari）打开  
     [[UIApplication sharedApplication] openURL:navigationAction.request.URL];  
       
     // 不允许web内跳转  
     decisionHandler(WKNavigationActionPolicyCancel);  
   } else {  
     self.progressView.alpha = 1.0;  
     decisionHandler(WKNavigationActionPolicyAllow);  
   }  
     
 }  
   
   
     // 在响应完成时，会回调此方法  
     // 如果设置为不允许响应，web内容就不会传过来  
 - (void)webView:(WKWebView *)webView  
 decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse  
 decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler {  
   decisionHandler(WKNavigationResponsePolicyAllow);  
     
 }  
   
   
 // 开始导航跳转时会回调  
 - (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation {  
      
 }  
   
     // 接收到重定向时会回调  
 - (void)webView:(WKWebView *)webView  
 didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation {  
      
 }  
   
   
     // 导航失败时会回调  
 - (void)webView:(WKWebView *)webView  
 didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error {  
       
 }  
   
   
 // 页面内容到达main frame时回调  
 - (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation {  
       
 }  
   
 // 导航完成时，会回调（也就是页面载入完成了）  
 - (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation {  
     NSLog(@"66===%s", __FUNCTION__);  
     // 禁用选中效果  
     [self.webView evaluateJavaScript:@"document.documentElement.style.webkitUserSelect='none'" completionHandler:nil];  
     [self.webView evaluateJavaScript:@"document.documentElement.style.webkitTouchCallout='none'" completionHandler:nil];  
 }  
     // 导航失败时会回调  
 - (void)webView:(WKWebView *)webView didFailNavigation:  
 (null_unspecified WKNavigation *)navigation withError:(NSError *)error  
 {  
       
 }  
   
   
 /* 对于HTTPS的都会触发此代理，如果不要求验证，传默认就行 
     如果需要证书验证，与使用AFN进行HTTPS证书验证是一样的 */  
   
 - (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:  
 (NSURLAuthenticationChallenge *)challenge completionHandler:  
 (void (^)(NSURLSessionAuthChallengeDisposition disposition,  
           NSURLCredential *__nullable credential))completionHandler  
 {  
   completionHandler(NSURLSessionAuthChallengePerformDefaultHandling, nil);  
 }  
   
   
 // 9.0才能使用，web内容处理中断时会触发  
 /* 
 - (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView { 
 } 
 */  
 #pragma mark - WKUIDelegate  
 - (void)webViewDidClose:(WKWebView *)webView {  
       
 }  
 /* 在JS端调用alert函数时，会触发此代理方法。JS端调用alert时所传的数据可以通过message拿到 在原生得到结果后，需要回调JS，是通过completionHandler回调 */  
 - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message  
 initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler  
 {  
   UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"alert" message:message preferredStyle:UIAlertControllerStyleAlert];  
   [alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {  
     completionHandler();  
   }]];  
     
   [self presentViewController:alert animated:YES completion:NULL];  
   NSLog(@"%@", message);  
    
 }  
   
     // JS端调用confirm函数时，会触发此方法  
     // 通过message可以拿到JS端所传的数据  
     // 在iOS端显示原生alert得到YES/NO后  
     // 通过completionHandler回调给JS端  
 - (void)webView:(WKWebView *)webView  
 runJavaScriptConfirmPanelWithMessage:(NSString *)message  
 initiatedByFrame:(WKFrameInfo *)frame  
 completionHandler:(void (^)(BOOL result))completionHandler {  
   UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"confirm" message:message preferredStyle:UIAlertControllerStyleAlert];  
   [alert addAction:[UIAlertAction actionWithTitle:@"确定"  
     style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action){  
     completionHandler(YES);  
   }]];  
   [alert addAction:[UIAlertAction actionWithTitle:@"取消"  
   style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action)  
     {  
     completionHandler(NO);  
   }]];  
   [self presentViewController:alert animated:YES completion:NULL];  
   NSLog(@"%@", message);  
 }  
  // JS端调用prompt函数时，会触发此方法  
     // 要求输入一段文本  
     // 在原生输入得到文本内容后，通过completionHandler回调给JS  
 - (void)webView:(WKWebView *)webView  
 runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt  
     defaultText:(nullable NSString *)defaultText  
 initiatedByFrame:(WKFrameInfo *)frame  
 completionHandler:(void (^)(NSString * __nullable result))completionHandler  
 {  
   UIAlertController *alert = [UIAlertController alertControllerWithTitle:prompt message:defaultText preferredStyle:UIAlertControllerStyleAlert];  
   [alert addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {  
     textField.textColor = [UIColor redColor];  
   }];  
   [alert addAction:[UIAlertAction actionWithTitle:@"确定"  
     style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {  
     completionHandler([[alert.textFields lastObject] text]);  
   }]];  
     
   [self presentViewController:alert animated:YES completion:NULL];  
 }  
   
 //  获取图片  
 - (void)beginOpenPhoto  
 {  
     // 主队列 异步打开相机  
     dispatch_async(dispatch_get_main_queue(), ^{  
         [self takePhoto];  
     });  
 }  
 #pragma mark 取消选择照片代理方法  
 - (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker  
 {  
     [picker dismissViewControllerAnimated:YES completion:nil];  
 }  
 #pragma mark      //打开本地照片  
 - (void) localPhoto  
 {  
     UIImagePickerController *imagePicker = [[UIImagePickerController alloc]init];  
     imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;  
     imagePicker.delegate = self;  
     [self presentViewController:imagePicker animated:YES completion:nil];  
 }  
 #pragma mark      //打开相机拍照  
 - (void) takePhoto  
 {  
     UIImagePickerControllerSourceType sourceType = UIImagePickerControllerSourceTypeCamera;  
     if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera])  
     {  
         UIImagePickerController *picker = [[UIImagePickerController alloc]init];  
         picker.delegate = self;  
         picker.allowsEditing = YES;  
         picker.sourceType = sourceType;  
         picker.modalTransitionStyle = UIModalTransitionStyleCoverVertical;  
         [self presentViewController:picker animated:YES completion:nil];  
     }  
     else  
     {  
         NSLog(@"模拟器中不能打开相机");  
         [self localPhoto];  
     }  
 }  
 //  选择一张照片后进入这里  
 - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info  
 {  
     NSString *type = [info objectForKey:UIImagePickerControllerMediaType];  
     //  当前选择的类型是照片  
     if ([type isEqualToString:@"public.image"])  
     {  
         // 获取照片  
         getImage = [info objectForKey:@"UIImagePickerControllerOriginalImage"];  
         NSLog(@"===Decoded image size: %@", NSStringFromCGSize(getImage.size));  
         // obtainImage 压缩图片 返回原尺寸  
         indextNumb = indextNumb == 1?2:1;  
         NSString *nameStr = [NSString stringWithFormat:@"Varify%d.jpg",indextNumb];  
         [SaveImage_Util saveImage:getImage ImageName:nameStr back:^(NSString *imagePath) {  
             dispatch_async(dispatch_get_main_queue(), ^{  
                 NSLog(@"图片路径：%@",imagePath);  
                 /** 
                  *  这里是IOS 调 js 其中 setImageWithPath 就是js中的方法 setImageWithPath(),参数是字典 
                  */  
                 NSString *callJSString = [NSString stringWithFormat:@"%@({\"imagePath\":\"%@\",\"iosContent\":\"获取图片成功，把系统获取的图片路径传给js 让html显示\"})",@"setImageWithPath",imagePath];  
                 [self.webView evaluateJavaScript:callJSString completionHandler:^(id resultObject, NSError * _Nullable error) {  
                     if (!error)  
                     {  
                         NSLog(@"OC调 JS成功");  
                     }  
                     else  
                     {  
                         NSLog(@"OC调 JS 失败");  
                     }  
                 }];  
             });  
         }];  
         [picker dismissViewControllerAnimated:YES completion:nil];  
     }  
 }  
   
 @end  

下面是图片处理的工具类

[objc]view plaincopy 
   
 //  SaveImage_Util.h  
 //  JS和iOS交互  
 //  
 //  Created by user on 16/10/14.  
 //  Copyright © 2016年 user. All rights reserved.  
 //  
   
 #import <Foundation/Foundation.h>  
 #import <UIKit/UIKit.h>  
 @interface SaveImage_Util : NSObject  
 #pragma mark  保存图片到document  
 + (BOOL)saveImage:(UIImage *)saveImage ImageName:(NSString *)imageName back:(void(^)(NSString *imagePath))back;  
   
 @end  

[objc]view plaincopy 
   
 //  SaveImage_Util.m  
 //  JS和iOS交互  
 //  
 //  Created by user on 16/10/14.  
 //  Copyright © 2016年 user. All rights reserved.  
 //  
   
 #import "SaveImage_Util.h"  
   
 @implementation SaveImage_Util  
 #pragma mark  保存图片到document  
 + (BOOL)saveImage:(UIImage *)saveImage ImageName:(NSString *)imageName back:(void(^)(NSString *imagePath))back  
 {  
     NSString *path = [SaveImage_Util getImageDocumentFolderPath];  
     NSData *imageData = UIImagePNGRepresentation(saveImage);  
     NSString *documentsDirectory = [NSString stringWithFormat:@"%@/", path];  
     // Now we get the full path to the file  
     NSString *imageFile = [documentsDirectory stringByAppendingPathComponent:imageName];  
     // and then we write it out  
     NSFileManager *fileManager = [NSFileManager defaultManager];  
     //如果文件路径存在的话  
     BOOL bRet = [fileManager fileExistsAtPath:imageFile];  
     if (bRet)  
     {  
         //        NSLog(@"文件已存在");  
         if ([fileManager removeItemAtPath:imageFile error:nil])  
         {  
             //            NSLog(@"删除文件成功");  
             if ([imageData writeToFile:imageFile atomically:YES])  
             {  
                 //                NSLog(@"保存文件成功");  
                 back(imageFile);  
             }  
         }  
         else  
         {  
               
         }  
           
     }  
     else  
     {  
         if (![imageData writeToFile:imageFile atomically:NO])  
         {  
             [fileManager createDirectoryAtPath:documentsDirectory withIntermediateDirectories:YES attributes:nil error:nil];  
             if ([imageData writeToFile:imageFile atomically:YES])  
             {  
                 back(imageFile);  
             }  
         }  
         else  
         {  
             return YES;  
         }  
           
     }  
     return NO;  
 }  
 #pragma mark  从文档目录下获取Documents路径  
 + (NSString *)getImageDocumentFolderPath  
 {  
     NSString *patchDocument = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject];  
     return [NSString stringWithFormat:@"%@/Images", patchDocument];  
 }  
 @end  

以上内容仅供参考，部分内容来之网络，如有重复，请联系修改，谢谢！

欢迎各位同志的交流，如需demo可下载（免费）

zhuweideng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
iOS用WKWebView与JS交互获取系统图片及WKWebView的Alert,Confirm,TextInput的监听代理方法使用，屏蔽WebView的可选菜单

http://blog.csdn.net/boyqicheng/article/details/52812968最近做一个项目，开始是使用WebView与JS交互的，由于内存管理方面WebView欠佳。WKWebVIew的内存线程管理好，所以选择使用 WKWebVIew(使用WKWebView 的缺点在于，这个控件加载的H5页面不支持ajax请求，所以需要自己把网络请求在OC上实现)。
复制链接

扫一扫