WKWebView和JS的交互【原创】

本文的目的是方便IOS开发和前端开发的对接,目前仅仅是一些常用的方法,如果后期有新方法使用,也会回来维护的。由于本人水平有限,如果有错误的地方,希望多多包涵,并留言反馈。大家共同进步。

WKWebView的使用

首先使用WKWebView.你需要导入WebKit

#import 

然后添加一下WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler。

WKUIDelegate对应了显示JS的alert函数回调方法

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message

initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler

{

UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"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);


}

WKScriptMessageHandler 是为了交互使用js代码而使用的。

IOS调用JS

IOS调用JS一行代码就实现了,首先定义一个JS的字符串,然后一行代码搞定

NSString *jsStr = [NSString stringWithFormat:@"gettoken('%@')",token];

[detailsWebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {

NSLog(@"%@----%@",result, error);

}];

同样,我可以通过js获取一个H5页面的控件,并去修改他的值

例如我要获取一个标签的内容.标签如下.

//设置JS

NSString *inputValueJS = @"document.getElementsByName('input')[0].attributes['value'].value";

//执行JS

[webView evaluateJavaScript:inputValueJS completionHandler:^(id _Nullable response, NSError * _Nullable error) {

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

}];

JS调用IOS

JS调用IOS,首先,IOS这边需要创建一个方法名,然后监听这个方法名。JS通过这个方法名来发送消息,IOS这边获取

首先我们需要在页面进入时注册方法

[[detailsWebView configuration].userContentController addScriptMessageHandler:self name:@"backView"];

[[detailsWebView configuration].userContentController addScriptMessageHandler:self name:@"uploadView"];

其中@”backView”是方法名称,这个方法名就是JS那边调用的方法名

JS方法

window.webkit.messageHandlers..postMessage()

之后IOS就可以在回调方法里处理这个函数了

IOS代里方法

//WKScriptMessageHandler协议方法

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

//code

if ([message.name isEqualToString:@"backView"]) {

NSDictionary *dictionary = message.body;

if ([dictionary.allKeys containsObject:@"number"]) {

photoNumber = [dictionary[@"number"] integerValue];

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

}

return;

}

}

其中message.body就是js传过来的值,我们来根据值处理逻辑就好了。

基本的技术都讲完了,但是不要忘记在离开页面的时候释放掉我们对于JS的监听

// 因此这里要记得移除handlers

[detailsWebView.configuration.userContentController removeScriptMessageHandlerForName:@"backView"];

[detailsWebView.configuration.userContentController removeScriptMessageHandlerForName:@"uploadView"];

那么我对于WKWebView和JS的交互就暂时介绍到这里了,如果能对您的开发带来帮助,我将不胜荣幸。

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22987.html

微信打赏

支付宝打赏

感谢您对作者Ace的打赏,我们会更加努力! 如果您想成为作者,请点我

IT985博客责编内容来自:IT985博客 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 移动开发 » WKWebView和JS的交互【原创】

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录