WKWebView与js的交互

作者: 鄂北 | 来源:发表于2021-04-26 10:46 被阅读0次

    一JS调用OC的方法

    方法一:利用WKUserContentController
    1、先在OC这边注册方法给js调用

    self.webConfig = [[WKWebViewConfiguration alloc] init];
    self.wkwebview = [[WKWebView alloc] initWithFrame:CGRectZero configuration:self.webConfig];
    // 提供方法给js调用
    [self.webConfig.userContentController addScriptMessageHandler:self name:@"gotoActive"];
    

    gotoActive是oc与js约定好的方法,js需要调用这个方法给oc传值

    2、js调用oc方法传值

    window.webkit.messageHandlers.gotoActive.postMessage();
    

    gotoActive是oc与js约定好的方法,括号里就是写js给oc传的值,可以传数组、字符串、字典,如果没参数的话需要传个null,不传的话iOS端会收不到方法的调用

    3、oc获取js传过来的值

    -(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
        NSLog(@"js调用的方法:%@",message.name);
        NSLog(@"js传过来的数据:%@",message.body);
    }
    

    在js调用了oc的方法后,会在这个方法里获取到js调用的oc的方法和js传过来的值

    方法二:利用windows.location.href
    1、js利用windows.location.href='gotoActive://'方式调用oc方法
    gotoActive是js跟oc双方商量好的,//后面可以带上参数字符串
    2、oc可以通过拦截URL的方式来获取到js调用iOS

    - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
        
        // 获取url
        NSURLRequest * request = navigationAction.request;
        NSString * requestStr = request.URL.absoluteString;
        NSLog(@"URL:%@",requestStr);
        
        if ([request.URL.scheme isEqualToString:@"gotoActive"]){
            //通过URL.scheme来判断是js通过哪个方法来调用的
            decisionHandler(WKNavigationActionPolicyCancel);
        }else {
            decisionHandler(WKNavigationActionPolicyAllow);
        }
    }
    

    通过URL.scheme来判断是js通过哪个方法来调用的,参数就可以通过截取url来获得。decisionHandler(WKNavigationActionPolicyCancel);是用来阻止界面展示的,因为js调用方法时url并不是一个真的网页地址,所以需要阻止去加载这个假的网页地址,如果不阻止的话就会跳转一个新的网页,而且加载网页失败。decisionHandler(WKNavigationActionPolicyAllow);就是用来允许加载网页的方法
    方法三:利用js调用弹窗的方式
    js想要在WKWebview上弹窗就需要oc调用三个相关代理去监测,在监测到js有调用弹窗的方法时就会触发oc相关的代理
    首先要设置WKWebView的代理

    self.webView.UIDelegate = self;
    

    实现三个代理方法

    // 显示一个按钮。点击后调用completionHandler回调
    - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
        
        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:message message:nil preferredStyle:UIAlertControllerStyleAlert];
        [alertController addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
    
            completionHandler();
        }]];
        [self presentViewController:alertController animated:YES completion:nil];
    }
    
    // 显示两个按钮,通过completionHandler回调判断用户点击的确定还是取消按钮
    - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
        
        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:message message:nil preferredStyle:UIAlertControllerStyleAlert];
        [alertController addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            
            completionHandler(YES);
        }]];
        [alertController addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
            
            completionHandler(NO);
        }]];
        [self presentViewController:alertController animated:YES completion:nil];
        
    }
    
    // 显示一个带有输入框和一个确定按钮的,通过completionHandler回调用户输入的内容
    - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler{
        
        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"" message:nil preferredStyle:UIAlertControllerStyleAlert];
        [alertController addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
            
        }];
        [alertController addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            
            completionHandler(alertController.textFields.lastObject.text);
        }]];
        [self presentViewController:alertController animated:YES completion:nil];
    }
    

    可以通过这三个代理方法实现与js的交互,还可以实现给js返回值

    二OC调用JS的方法

    方法一

        NSString * str = [NSString stringWithFormat:@"setAddress('%@','%@','%@')",dic[@"longitude"],dic[@"latitude"],dic[@"address"]];
        
        [self.wkwebview evaluateJavaScript:str completionHandler:^(id _Nullable obj, NSError * _Nullable error) {
            
        }];
    

    setAddress是js的方法,括号里的就是js方法的参数

    方法二

    JSContext * context = [self.wkwebview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    JSValue * action = context[@"getImg"];
    [action callWithArguments:@[@"参数"]];
    

    getImg是js的方法,利用callWithArguments方法进行传参

    相关文章

      网友评论

        本文标题:WKWebView与js的交互

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