iOS WKWebView与JS交互

本篇主要给大家分享的是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:回调

- evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;

使用以上方法,在网页加载完成的时候进行操作.例如我要获取一个标签的内容.标签如下.

<input style="display:none;" name="input" value='I am Input'/>

- webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation { //设置JS NSString *inputValueJS = @"document.getElementsByName[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[0].valuedocument.getElementById.value//获取标签某个属性document.getElementsByName[0].attributes['attribute'].valuedocument.getElementById.attributes['attribute'].value

注:通过name获取的是个数组,可能有多个,方法名Elements是个复数,不要忘了写s,我之前就被坑过.

二.运行时加载JS代码

使用此方法的时候,WKWebView的初始化方法就要使用如下方法,设置配置.

- (instancetype)initWithFrame: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对象,初始化WKWebViewConfigurationWKWebViewConfiguration *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函数时,会触发此代理方法。- webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:completionHandler; //JS端调用confirm函数时,会触发此代理方法。- webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(BOOL result))completionHandler; //JS端调用prompt函数时,会触发此代理方法。- webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(NSString * _Nullable result))completionHandler;

以上方法需要在方法的结束写上回调.

completionHandler();

三.JS调用OC

当JS端想传一些数据给iOS.那它们会调用下方方法来发送.

window.webkit.messageHandlers.<方法名>.postMessage(<数据>)

上方代码在JS端写会报错,导致网页后面业务不执行.可使用try-catch执行.

那么在OC中的处理方法如下.它是WKScriptMessageHandler的代理方法.name和上方JS中的方法名相对应.

- addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;

具体如下:

//设置addScriptMessageHandler与name.并且设置<WKScriptMessageHandler>协议与协议方法[[_webView configuration].userContentController addScriptMessageHandler:self name:@"方法名"];//WKScriptMessageHandler协议方法- userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { //code}

到目前为止,已经可以检测到JS传来的数据了.但是控制器不走-dealloc方法.

四.JS调用OC 内存泄露处理

关于内存泄露问题.此处参考:使用WKWebView替换UIWebView思路是另外创建一个代理对象,然后通过代理对象回调指定的self.

@interface WeakScriptMessageDelegate : NSObject<WKScriptMessageHandler>@property (nonatomic, assign) id<WKScriptMessageHandler> scriptDelegate;- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate;@end@implementation WeakScriptMessageDelegate- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate{ self = [super init]; if  { _scriptDelegate = scriptDelegate; } return self;}- 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方法中销毁.

- dealloc { ... [[_webView configuration].userContentController removeScriptMessageHandlerForName:@"方法名"]; ...}

好了,以上就是我分享的内容了.有什么不对的地方,或者不全面的地方还请各位大神指点~~

相关文章