WKWebView和JS交互

阅读目录

一、WKWebView的框架

二、WKWebView的两个代理WKNabigationDelegate、WKUIDelegate

三、OC与JS的交互和JS调用OC方法的回调 WKScriptMessageHandler

四、部分代码，包括OC和JS

一、WKWebView的框架

1.WKWebViewConfiguration：只读，需在webView之前初始化
其中包括
WKProcessPool：进程加载池，基本用不到
WKPreferences：webView的偏好设置，如最小字体、是否允许JS等
WKUserContentController：这个主要管理和JS的交互了，下面会详细讲到
WKWebsiteDataStore：web的数据管理，清除缓存等，但是要注意这个ios9.0及以上才可以用

2.WKBackForwardList：只读，管理WKWebView之前访问的网页对象；对象类WKBackForwardListItem就相当于网页，包括标题，URL

3.WKFrameInfo:网页的布局信息

4.WKNavigation:网页的加载进度信息,话是这么说，其实这个类没啥用，.h文件里啥都没有；最后还是要用estimatedProgress去算大概进度

5.WKNavigationAction:网页的导航变化信息

6.WKNavigationResponse:网页导航变化返回的内容

7.WKWindowFeatures:设置新加载的网页窗口属性，可以控制menuBar、statusBar、toolBar的可见度等

8.WKUserScript:脚本类，配合WKUserContentController往网页里添加用户脚本

9.WKSciptMessage:网页调用客户端传过来的信息类，包括调用的方法名name、内容body（任意类型,只要双方约定好怎么解开就ok）

二、WKWebView的两个代理WKNabigationDelegate、WKUIDelegate

1.WKNavigationDelegate 分 加载过程监控和是否跳转
加载过程监控:

// 页面开始加载时调用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation
// 当内容开始返回时调用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation
// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation
// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error

是否跳转:

//发送请求之前，设置是否跳转，在代码块`decisionHandler `中传参即可，具体查看`WKNavigationActionPolicy `枚举
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
//收到响应后，设置是否跳转，其他同上
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler
//收到服务器跳转请求之后调用,目前还不知道可以用来干嘛
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation

2.WKUIDelegate

//创建一个新的webView，这个主要是页面想重开一个webView使用，注意不可使用当前的webView，否则会异常，除非强制内容还是在当前页面显示
- (nullable WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures
//web界面弹出的三种提示框
// 界面弹出警告框
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(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

三、OC与JS的交互和JS调用OC方法的回调 WKScriptMessageHandler

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
//JS调用OC方法成功后的回调
//这里通过message对象判断要执行的事件，以及传过来的内容，
  详细看上面`WKScriptMessage`介绍
}

四、部分代码，包括OC和JS

OC:

1.WKWebView初始化

WKWebViewConfiguration *wkConfig = [[WKWebViewConfiguration alloc] init];
    wkConfig.userContentController = [[WKUserContentController alloc] init];
    _webView = [[WKWebView alloc] initWithFrame:self.view.bounds
                                  configuration:wkConfig];
    _webView.backgroundColor = [UIColor whiteColor];
    _webView.UIDelegate = self;
    _webView.navigationDelegate = self;

2.OC注册方法给JS调用、JS调用OC后的回调和JS如何调用

OC注册方法给JS调用:

//self为当前对象触发代理方法，`methodName`为方法名（NSString型）,JS那边调用时需一样
[_webView.configuration.userContentController addScriptMessageHandler:self name:methodName];

JS调用OC后的回调:

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    /*message对象里我们主要会用到name和body
      name:JS调用OC时的方法名，与上面注册时对应
      body:JS传过来的值，类型根据JS的设置为准，两边商量着定就OK
    */
    if ([message.name isEqualToString:@"methodName"]) {
   //此处做相应的响应h5的操作
    }
}

JS调起OC:

function btnClick() {
    //methodName与上面OC注册的对应，否则无效
    //参数可以为:null、'Hello World !'、['hello','world']，看需求
    window.webkit.messageHandlers.methodName.postMessage(参数)
}

3.JS注册方法给OC调用、OC调用JS的方法

JS注册方法给OC调用:

//aa、bb为参数，当然也可以直接( )、(aa)
function helloWorld(aa,bb) {
    //此处为JS收到OC调用此方法后的处理
}

OC调用JS的方法

[_webView evaluateJavaScript:@"helloWorld('Hello','World')" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
   //调用JS方法的回调
   NSLog(@"%@ %@",response,error);
}];

ps：因为是直接写在项目里了，所以如果有需要会重新整理出来完整的JS和OC的代码