本篇主要给大家分享的是OC版的WKWebView与JS的交互.,Swift版本请查看Swift WKWebView与JS交互.
我还写了另外一篇,综合UIWebView与WKWebView与JS交互的文章.欢迎收藏.
iOS OC与JS交互(WebView监听事件)
在iOS 8以后,是不是有很多小伙伴把UIWebView转为WKWebView,同样的之前在UIWebView与JS通信的方法也需要换成WKWebView中的处理方式.那么下面我就分享一下WKWebView与JS的交互.
一. WKWebView调用JS
总之一行代码搞定:
[webView evaluateJavaScript:@"我是JS" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
}];
首先使用WKWebView.你需要导入WebKit #import <WebKit/WebKit.h>
然后初始化一个WKWebView,设置WKNavigationDelegate,并且执行WKNavigationDelegate的方法.在网页加载成功的时候,我们会调用一些JS代码对网页进行设置.
WKWebView本身提供一个方法进行处理JS代码.
javaScriptString:所执行的JS代码
completionHandler:回调
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
使用以上方法,在网页加载完成的时候进行操作.
例如我要获取一个标签的内容.标签如下.
<input style="display:none;" name="input" value='I am Input'/>
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
//设置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);
}];
}
通过以上操作就成功获取到input标签的value属性值了.如果报错,可以通过error进行相应的错误处理.
其实也可以设置一些JS对网页进行一些设置.
下面附带一点简单的JS代码.
//获取标签内容
document.getElementsByName('name')[0].value
document.getElementById('id').value
//获取标签某个属性
document.getElementsByName('name')[0].attributes['attribute'].value
document.getElementById('name').attributes['attribute'].value
注:通过name获取的是个数组,可能有多个,方法名Elements是个复数,不要忘了写s,我之前就被坑过.
二.运行时加载JS代码
使用此方法的时候,WKWebView的初始化方法就要使用如下方法,设置配置.
- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration NS_DESIGNATED_INITIALIZER;
注入需要执行的代码.
NSString *js = @"I am JS Code";
//初始化WKUserScript对象
//WKUserScriptInjectionTimeAtDocumentEnd为网页加载完成时注入
WKUserScript *script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
//根据生成的WKUserScript对象，初始化WKWebViewConfiguration
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
[config.userContentController addUserScript:script];
self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
[_wkWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"URL"]]];
[self.view addSubview:_webView];
上边假如有一些JS操作执行,这个时候就触发它的另一个代理WKUIDelegate的回调方法.
//在JS端调用alert函数时，会触发此代理方法。
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;
//JS端调用confirm函数时，会触发此代理方法。
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
//JS端调用prompt函数时，会触发此代理方法。
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;
以上方法需要在方法的结束写上回调.
completionHandler();
三.JS调用OC
当JS端想传一些数据给iOS.那它们会调用下方方法来发送.
window.webkit.messageHandlers.<方法名>.postMessage(<数据>)
上方代码在JS端写会报错,导致网页后面业务不执行.可使用
try-catch执行.
那么在OC中的处理方法如下.它是WKScriptMessageHandler的代理方法.name和上方JS中的方法名相对应.
- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;
具体如下:
//设置addScriptMessageHandler与name.并且设置<WKScriptMessageHandler>协议与协议方法
[[_webView configuration].userContentController addScriptMessageHandler:self name:@"方法名"];
//WKScriptMessageHandler协议方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
//code
}
到目前为止,已经可以检测到JS传来的数据了.但是控制器不走-dealloc方法.
四.JS调用OC 内存泄露处理
关于内存泄露问题.此处参考:使用WKWebView替换UIWebView
思路是另外创建一个代理对象，然后通过代理对象回调指定的self.
@interface WeakScriptMessageDelegate : NSObject<WKScriptMessageHandler>
@property (nonatomic, weak) id<WKScriptMessageHandler> scriptDelegate;
- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate;
@end
@implementation WeakScriptMessageDelegate
- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate
{
self = [super init];
if (self) {
_scriptDelegate = scriptDelegate;
}
return self;
}
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
[self.scriptDelegate userContentController:userContentController didReceiveScriptMessage:message];
}
@end
使用时,只需要将原本的self修改为WeakScriptMessageDelegate的一个实例就行了.
//设置addScriptMessageHandler与name.并且设置<WKScriptMessageHandler>协议与协议方法
[[_webView configuration].userContentController addScriptMessageHandler:[[WeakScriptMessageDelegate alloc] initWithDelegate:self] name:@"方法名"];
最后我们创建的代理要在控制器的-dealloc方法中销毁.
- (void)dealloc {
...
[[_webView configuration].userContentController removeScriptMessageHandlerForName:@"方法名"];
...
}
好了,以上就是我分享的内容了.有什么不对的地方,或者不全面的地方还请各位大神指点~~
