最新消息:文章中包含代码时,请遵守代码高亮规范!

WKWebView和JS的交互【原创】

iOS Ace 57浏览 0评论

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

WKWebView的使用

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

#import <WebKit/WebKit.h>

然后添加一下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];

//&amp;amp;nbsp; &amp;amp;nbsp; 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页面的控件,并去修改他的值

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


&amp;lt;input style="display:none;" name="input"&amp;nbsp; value='I am Input'/&amp;gt;


//设置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.<backView>.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


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

您必须 登录 才能发表评论!