美文网首页
WKWebView做OC与JS交互

WKWebView做OC与JS交互

作者: Brice_Zhao | 来源:发表于2016-12-08 15:32 被阅读153次

    在apple API reference中指出在运行iOS 8之后的程序时,使用WKWebView而不是UIWebView。
    WebKit框架概览(Mindnote):

    创建

    WebKit (WKWebView):
    see it in WKWebView API Reference

    WKWebView * WK;
    WKWebViewConfiguration * config = [[WKWebViewConfiguration alloc]init];
    WK = [[WKWebView alloc]initWithFrame:[UIScreen mainScreen].bounds configuration:config];
    [WK loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
    
    使用WKWebViewConfiguration来进行配置:
    
    // 1. 设置线程池
    WKProcessPool *pool = [[WKProcessPool alloc]init];
    config.processPool = pool;
    // WKProcessPool类中没有暴露任何属性和方法,配置为同一个进程池的WebView会共享数据,例如Cookie、用户凭证等,开发者可以通过编写管理类来分配不同维度的WebView在不同进程池中。
    
    // 2. 进行偏好设置
    WKPreferences * preference = [[WKPreferences alloc]init];
    //最小字体大小 当将javaScriptEnabled属性设置为NO时,可以看到明显的效果
    preference.minimumFontSize = 0;
    //设置是否支持javaScript 默认是支持的
    preference.javaScriptEnabled = YES;
    //设置是否允许不经过用户交互由javaScript自动打开窗口
    preference.javaScriptCanOpenWindowsAutomatically = YES;
    config.preferences = preference;
    
    // 3. **设置内容交互控制器 用于处理JavaScript与native交互**
    WKUserContentController * userController = [[WKUserContentController alloc]init];
    //设置处理代理并且注册要被JS调用的方法名称
    [userController addScriptMessageHandler:self name:@"name"];
    //JS注入,注入一个测试方法。
    NSString *javaScriptSource = @"function userFunc(){window.webkit.messageHandlers.name.postMessage( {/"name/":/"HS/"})}";
    WKUserScript *userScript = [[WKUserScript alloc] initWithSource:javaScriptSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];// forMainFrameOnly:NO(全局窗口),yes(只限主窗口)
    [userController addUserScript:userScript];
    config.userContentController = userController;
    
    OC和JS交互example
    1. 执行html 已经存在的JS方法
    - (IBAction)exeFuncTouched:(id)sender {
        [self.myWebView evaluateJavaScript:@"showAlert('hahahha')"  completionHandler:^(id item, NSError * _Nullable error) {
            
        }];
    }
    
    2. JS调用OC
     function callOC(func,param){
            var url= "func=" + func;
            for(var i in param)
            {
             url = url + "&" + i + "=" + param[i];
            }
            window.webkit.messageHandlers.Native.postMessage(url);
     }
    
    // JavaScript调用
    <input type="button" value="打个招呼" onclick="callOC('alert',{'message':'你好么'})" />
    

    Objective-C实现(WKUserContentController对象提供的JavaScript来发布消息和注入用户脚本网页视图方式)

    // 通过
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    config.userContentController = [[WKUserContentController alloc] init];
    // 注入JS对象Native,
    // 声明WKScriptMessageHandler 协议
    [config.userContentController addScriptMessageHandler:self name:@"Native"];
     
    self.myWebView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
    self.myWebView.UIDelegate = self;
    [self.view addSubview:self.myWebView]
    
    #pragma mark - WKScriptMessageHandler
    - (void)userContentController:(WKUserContentController *)userContentController
          didReceiveScriptMessage:(WKScriptMessage *)message {
        if ([message.name isEqualToString:@"Native"]) {
            NSLog(@"message.body:%@", message.body);
            //如果是自己定义的协议, 再截取协议中的方法和参数, 判断无误后在这里手动调用oc方法
            NSMutableDictionary *param = [self queryStringToDictionary:message.body];
            NSLog(@"get param:%@",[param description]);
            
            NSString *func = [param objectForKey:@"func"];
            
            //调用本地函数
            if([func isEqualToString:@"alert"])
            {
                [self showMessage:@"来自网页的提示" message:[param objectForKey:@"message"]];
            }
         
        }
    }
    
    
    

    相关文章

      网友评论

          本文标题:WKWebView做OC与JS交互

          本文链接:https://www.haomeiwen.com/subject/zjdsmttx.html