前言
之前有写过一篇是UIWebView的js交互，但是UIWebView有内存泄露问题,并且iOS13以后将不支持UIWebView，所以现在大家一般都会使用WKWebView。
现在总结一下WKWebView加载网页还有与JS交互的方法。
加载网页分为加载本地html文件和加载线上的网页链接。为了方便讲解，我这里用的是加载本地html文件的方式。
把一个html文件导入到工程中
图片.png
导入webView框架
#import <WebKit/WebKit.h>
遵循代理
<WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler>
初始化webView 设置代理
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, self.view.frame.size.height - 64) configuration:config];
webView.navigationDelegate = self;
webView.UIDelegate = self;
向网页注入js
注入js分为在网页document加载完毕注入和加载之前注入
// 在加载之前注入，这时注入的js会在网页的所有元素加载之前和网页本身的js执行之前执行
WKUserScriptInjectionTimeAtDocumentStart
// 在加载之后注入，当网页的元素加载之后以及网页本身的js执行之后才会执行注入的js。
WKUserScriptInjectionTimeAtDocumentEnd
NSString *js = @"document.getElementsByTagName('h2')[0].innerText = '我是ios为h5注入的方法'";
WKUserScript *script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
[config.userContentController addUserScript:script];
加载本地html文件
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
NSURL *url = [[NSURL alloc] initWithString:filePath];
[self.webView loadHTMLString:htmlString baseURL:url];
WKNavigationDelegate代理方法实现
// 开始加载
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
// 可以在这里做正在加载的提示动画 然后在加载完成代理方法里移除动画
}
// 网络错误
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error {
// 在这里可以做错误提示
}
// 网页加载完成
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
// 在这里可以移除正在加载的提示动画
}
WKUIDelegate代理方法实现
由于安全机制的问题，WKWebView默认对JavaScript下alert类的方法（包括alert(),confirm(),prompt()）做了拦截，如果要想正常使用，需要实现WKWebView的三个代理方法
// alert
//此方法作为js的alert方法接口的实现，默认弹出窗口应该只有提示信息及一个确认按钮，当然可以添加更多按钮以及其他内容，但是并不会起到什么作用
//点击确认按钮的相应事件需要执行completionHandler，这样js才能继续执行
////参数 message为 js 方法 alert(<message>) 中的<message>
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:([UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}])];
[self presentViewController:alertController animated:YES completion:nil];
}
// confirm
//作为js中confirm接口的实现，需要有提示信息以及两个相应事件， 确认及取消，并且在completionHandler中回传相应结果，确认返回YES， 取消返回NO
//参数 message为 js 方法 confirm(<message>) 中的<message>
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:([UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
completionHandler(NO);
}])];
[alertController addAction:([UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler(YES);
}])];
[self presentViewController:alertController animated:YES completion:nil];
}
// prompt
//作为js中prompt接口的实现，默认需要有一个输入框一个按钮，点击确认按钮回传输入值
//当然可以添加多个按钮以及多个输入框，不过completionHandler只有一个参数，如果有多个输入框，需要将多个输入框中的值通过某种方式拼接成一个字符串回传，js接收到之后再做处理
//参数 prompt 为 prompt(<message>, <defaultValue>);中的<message>
//参数defaultText 为 prompt(<message>, <defaultValue>);中的 <defaultValue>
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler{
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:prompt message:@"" preferredStyle:UIAlertControllerStyleAlert]; [alertController addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
textField.text = defaultText;
}];
[alertController addAction:([UIAlertAction actionWithTitle:@"完成" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler(alertController.textFields[0].text?:@"");
}])];
[self presentViewController:alertController animated:YES completion:nil];
}
iOS调用js
下面的代码是调用了js里的navButtonAction方法，并且传入了两个参数，回调里面response是这个方法return回来的数据。
[self.webView evaluateJavaScript:@"navButtonAction('Jonas',25)" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
NSLog(@"%@=====%@",response,error);
}];
js调iOS
当JS端想传一些数据给iOS.那它们会调用下方方法来发送。
window.webkit.messageHandlers.<方法名>.postMessage(<数据>)
注意：上方代码在JS端写会报错,导致网页后面业务不执行.可使用try-catch执行。
在web端具体代码如下：
try {
// 注意这里就算不想传参数 也要传一个空字符串''过来
window.webkit.messageHandlers.show.postMessage('我是js传递过来的数据');
} catch (e) {
}
在OC中的处理方法如下。它是WKScriptMessageHandler的代理方法name和上方JS中的方法名相对应。
- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;
具体代码如下：
[webView.configuration.userContentController addScriptMessageHandler:self name:@"show"];
收到js传来的消息时会走WKScriptMessageHandler协议方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
NSLog(@"%@",message.name);// 方法名
NSLog(@"%@",message.body);// 传递的数据
}
常见问题
1.控制器无法释放问题
细心的朋友会发现，加载WKWebView并添加js交互的控制器，在退出后无法释放掉。
这是由于使用- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;方法后，把self添加为handler会导致self被WKWebView强持有，造成循环引用。所以在使用这个方法时可以将它写在控制器将出现时方法中，在控制器将消失方法中再移除。
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"name"];
}
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"name"];
}
2.app端调不到js的方法
现在前端开发很多都不是原生开发，而是使用vue框架。而vue框架中，在methods:这个模块里面声明的方法，不能注入到index.js文件里。原生调用js的方法却只能在index.js里面找，所以前端开发人员，要么把方法在index.js里面声明，要么在methods:模块里声明后，再在钩子函数mounted里面用全局的window对象来引用方法。
mounted: function() {
window.appMethod = this.appMethod;
},
methods:{
appMethod: function (string) {
console.log('app调用js方法参数=' + string);
}
}
3.js调用OC后，OC如何返回数据给js？
js调用OC方法后，OC是没法像安卓端那样直接return数据给js的，只能通过OC调用js方法，将数据发送过去。
4.OC如何将字典发送给js?
将字典转化为字符串，然后传递给js, js那边收到后再解析为Json即可。
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:dic options:NSJSONWritingPrettyPrinted error:nil];
NSString * str = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
NSString *jsStr = [NSString stringWithFormat:@"getParamsFromNative(%@)", str];
[self.webView evaluateJavaScript:jsStr
completionHandler:^(id response, NSError * error) {
NSLog(@"response: %@, \nerror: %@", response, error);
}];
注意：如果将要传递的字典中某个值也为字典，则需要将这个值的字典同样转化为字符串作为值才可以传递过去。
demo下载
最后为大家提供了一个简单的demo，能够更清晰的看到如何使用。
下载地址：
https://github.com/jiangbin1993/WKWebView-
