iOS WKWebView与JS交互

2023年2月18日 223次阅读 来源: 像风一样的孩子丶

本篇主要给大家分享的是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, assign) 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:@"方法名"];
    ...
}

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

    原文作者：像风一样的孩子丶
    原文地址: https://www.jianshu.com/p/4d12d593ba60
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞