iOS WKWebView OC 与 JS 交互学习

2022-10-03 15:05:49

我写WKWebView 想让服务端相应一个方法但是不响应，根据 UIWebView 用 JSContext就能拿到响应的处理经验是不是服务端也需要对 WKwebView有兼容的一个写法？？？特此学习 WKWebView 记录

一 .WKWebView 代理协议

(1)WKScriptMessageHandler :

OC在JS调用方法时做的处理。如果需要调用对话窗口就会先执行（3）协议再执行（1）协议

好处：传递给OC的参数直接在字典里面，不用再在url里面拼凑后的结果去截取解析。

必须实现

- (void)userContentController:(WKUserContentController *)userContentController

      didReceiveScriptMessage:(WKScriptMessage *)message

(2)WKNavigationDelegate:

处理页面跳转和载入过程。

#pragma mark -- 进行页面跳转

// 接收到服务器跳转请求之后再执行

- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation;

// 在发送请求之前，决定是否跳转

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler ;

// 在收到响应后，决定是否跳转

- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler ;

#pragma mark -- 追踪加载过程

// 页面开始加载时调用

- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation;

// 当内容开始返回时调用

- (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation;

// 页面加载完成之后调用

- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation;

// 页面加载失败时调用

- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error;

//好多协议 按需添加。。。

(3)WKUIDelegate

这个协议主要用于WKWebView处理web界面的三种提示框(警告框、确认框、输入框) 的网页交互

#pragma mark - WKUIDelegate
//警告

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler；

//确认

- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;

// 输入框

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler；

二.协议使用

(1)WKScriptMessageHandler ,关键在当前页面销毁后要注销协议保证无强引用，当前页面也无法销毁，发生内存泄漏。

//注册协议

    self.userContentController = [[WKUserContentController alloc] init];

    //注册方法
 WKDelegateController *delegateController = [[WKDelegateController alloc]init];

    delegateController.delegate = self;

    // 通过JS与webview内容交互

    config.userContentController = self.userContentController;

    // 注入JS对象名称HFAlert，HFConfirm,HFPrompt当JS通过HFAlert，HFConfirm,HFPrompt来调用时，

    // 我们可以在WKScriptMessageHandler代理中接收到

    [config.userContentController addScriptMessageHandler:delegateController name:HFAlert];

    [config.userContentController addScriptMessageHandler:delegateController name:HFConfirm];

    [config.userContentController addScriptMessageHandler:delegateController name:HFPrompt];

    [config.userContentController addScriptMessageHandler:delegateController name:HFShare];
//注销协议

- (void)dealloc

{

    [self.userContentController removeScriptMessageHandlerForName:HFAlert];

    [self.userContentController removeScriptMessageHandlerForName:HFConfirm];

    [self.userContentController removeScriptMessageHandlerForName:HFPrompt];

    [self.userContentController removeScriptMessageHandlerForName:HFShare];

}
//实施协议

- (void)userContentController:(WKUserContentController *)userContentController

      didReceiveScriptMessage:(WKScriptMessage *)message {

    NSLog(@"%@", message.body);

    if ([message.name isEqualToString:HFAlert]) {

        // 打印所传过来的参数，只支持NSNumber, NSString, NSDate, NSArray,

        // NSDictionary, and NSNull类型

        NSDictionary *dictionary = message.body;

        if (![dictionary isKindOfClass:[NSDictionary class]]) {

            return;

        }

        NSLog(@"%@",dictionary[@"body"]); //服务端传值 log

        dispatch_async(dispatch_get_main_queue(), ^{

            //主线程操作UI

        });

    } else if ([message.name isEqualToString:HFConfirm]) {

    } else if ([message.name isEqualToString:HFPrompt]) {

    } else if ([message.name isEqualToString:HFShare]) {

    }

}

设置代理 WKDelegateController 重写成代理控制器性质，保证设置代理后，可移除 的关键！！！

//

//  WKDelegateController.m

//  SectionDemo

//

//  Created by HF on 2017/6/22.

//  Copyright © 2017年 HF-Liqun. All rights reserved.

//

#import "WKDelegateController.h"

@interface WKDelegateController ()

@end

@implementation WKDelegateController

- (void)viewDidLoad {

    [super viewDidLoad];

}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{

    if ([self.delegate respondsToSelector:@selector(userContentController:didReceiveScriptMessage:)]) {

        [self.delegate userContentController:userContentController didReceiveScriptMessage:message];

    }

}

@end

////////

//

//  WKDelegateController.h

//  SectionDemo

//

//  Created by HF on 2017/6/22.

//  Copyright © 2017年 HF-Liqun. All rights reserved.

//

#import <UIKit/UIKit.h>

#import <WebKit/WebKit.h>

@protocol WKDelegate <NSObject>

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

@end

@interface WKDelegateController : UIViewController <WKScriptMessageHandler>

@property (weak , nonatomic) id < WKScriptMessageHandler > delegate;

@end

(2)WKNavigationDelegate,举例子和UIWebView shouldStart 方法一样，在请求前判断要不要继续执行

// 在发送请求之前，决定是否跳转

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {

    NSString *hostname = navigationAction.request.URL.host.lowercaseString;

    if (navigationAction.navigationType == WKNavigationTypeLinkActivated

        && ![hostname containsString:@".baidu.com"]) {

        // 对于跨域，需要手动跳转

        [[UIApplication sharedApplication] openURL:navigationAction.request.URL];

        // 不允许web内跳转

        decisionHandler(WKNavigationActionPolicyCancel);

    } else {

        self.progressView.alpha = 1.0;

        decisionHandler(WKNavigationActionPolicyAllow);

    }

    NSLog(@"%s", __FUNCTION__);

}

(3)WKUIDelegate 参考代码

#pragma mark - WKUIDelegate 这个协议主要用于WKWebView处理web界面的三种提示框(警告框、确认框、输入框) 的网页交互/**

 *  web界面中有弹出警告框时调用

 *

 *  @param webView           实现该代理的webview

 *  @param message           警告框中的内容

 *  @param frame             主窗口

 *  @param completionHandler 警告框消失调用 无回调

 */

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {

    NSLog(@"%s", __FUNCTION__);

    //completionHandler(@"空回调");

    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"alert" message:[NSString stringWithFormat:@"JS调用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);

}

/**

 确认框

 @param webView 实现该代理的webview

 @param message 确认窗口内容

 @param frame 主窗口

 @param completionHandler 警告框消失调用 回传布尔变量

 */

- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler {

    NSLog(@"%s", __FUNCTION__);

    //completionHandler(@"可以直接回传布尔变量");

    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"confirm" message:@"JS调用confirm" 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);

}

/**

 输入框

 @param webView web

 @param prompt 文本

 @param defaultText 默认输入文本

 @param frame frame

 @param completionHandler completionHandler  回传 字符串

 */

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler {

    //completionHandler(@"可以直接回传字符串");

    //可以根据回传参数来判断 是否必要展示 弹框，也可以隐式处理 根据当前参数判断回传指定逻辑参数

    NSLog(@"%s", __FUNCTION__);

    NSLog(@"%@", prompt);

    if ([prompt isEqualToString:HFPrompt]) {

        completionHandler(@"guess");

        return;

    }

    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"textinput" message:@"JS调用输入框" 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];

}

三.OC JS 互相调用

(1) OC 调用 JS 代码（OC注入JS）

        NSString *js = @"alertName('我是参数')";//可以向js传参数
        //NSString *js = @"callJsAlert()";//无参数方法
[self.webView evaluateJavaScript:js completionHandler:^(id _Nullable response, NSError * _Nullable error) {

            NSLog(@"response: %@ error: %@", response, error);

            NSLog(@"call js alert by native");

        }];

(2) JS 调用 OC方法：关键是按照约定方法名和注册名

关键代码：

//name 为注册名 HFAlert HFPrompt ...  messageBody 为传递参数集合 和 UIWebView的 调用OC 方法 是不一样的！！！！！

window.webkit.messageHandlers.<name>.postMessage(<messageBody>);

参考示例：

<!DOCTYPE html>

<html>

  <head>

    <title>iOS and Js</title>

    <style type="text/css">

      * {

        font-size: 40px;

      }

    </style>

  </head>

  <body>

    <div style="margin-top: 100px">

      <h1>Test how to use objective-c call js</h1><br/><br/>

      <div><input type="button" value="call shareButton" onclick="shareClick()"></div>

      <br/><br/>

      <div><input type="button" value="call js alert" onclick="callJsAlert()"></div>

      <br/>

      <div><input type="button" value="Call js confirm" onclick="callJsConfirm()"></div><br/>

    </div>

    <br/>

    <div>

      <div><input type="button" value="Call Js prompt " onclick="callJsInput()"></div><br/>

      <div>Click me here: <a href="http://www.baidu.com">Jump to Baidu</a></div>

    </div>

    <br/>

    <div id="SwiftDiv">

      <span id="jsParamFuncSpan" style="color: red; font-size: 50px;"></span>

    </div>

    <script type="text/javascript">

      //JS执行window.webkit.messageHandlers.Share.postMessage(<messageBody>)

      function callJsAlert() {

        //WKUIDelegate 空回调 警告框代理被触发

        alert('Objective-C call js to show alert');

        // HFAlert是我们所注入的对象

        window.webkit.messageHandlers.HFAlert.postMessage({body: 'call js alert in js'});

      }

      function callJsConfirm() {

        //WKUIDelegate 布尔回调 选择确认框代理被触发

        if (confirm('confirm', 'Objective-C call js to show confirm')) {

        document.getElementById('jsParamFuncSpan').innerHTML

        = 'true';

      } else {

        document.getElementById('jsParamFuncSpan').innerHTML

        = 'false';

      }

      //HFConfirm是我们所注入的对象

      window.webkit.messageHandlers.HFConfirm.postMessage({body: 'call js confirm in js'});

    }

    function callJsInput() {

      //WKUIDelegate 字符串回调 输入框代理被触发

      var response = prompt('HFPrompt', 'Please input your name:');

      document.getElementById('jsParamFuncSpan').innerHTML = response;

       //HFPrompt是我们所注入的对象

      window.webkit.messageHandlers.HFPrompt.postMessage({body: response});

    }

    function shareClick() {

        var response = prompt('Hello');

        window.webkit.messageHandlers.HFShare.postMessage({body:response ,title:'测试分享的标题',content:'测试分享的内容',url:'https://github.com/maying1992'});

    }

    function alertName(msg) {

        document.getElementById('jsParamFuncSpan').innerHTML = 'name' + msg + ', nice to meet you';

    }

      </script>

  </body>

</html>

end

参考

(1) http://www.tuicool.com/articles/qQRrMzY

(2)http://www.cocoachina.com/ios/20160906/17487.html

(3)http://www.jianshu.com/p/4fa8c4eb1316

(4)http://blog.csdn.net/u011619283/article/details/52135988

码农公寓

相关文章