WKWebView、WebView和JS的交互方式详解

2020-01-21 05:36:14于丽

由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新控件 WKWebView.

相比与 UIWebView, WKWebView 存在很多优势:

支持更多的HTML5的特性 高达60fps滚动刷新频率与内置手势 与Safari相容的JavaScript引擎 在性能、稳定性方面有很大提升占用内存更少 协议方法及功能都更细致 可获取加载进度等。

UIWebView与JS的交互方式

一,OC调用JS

直接调用苹果提供的API


- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

使用方式:

OC部分:


[self.webView stringByEvaluatingJavaScriptFromString:@"add(1,2)"];

 JS部分:


function add(a,b) {
 return a+b;
}

二,JS调用OC

OC处理JS的时机在UIWebView的代理方法内


- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

使用方式:

JS部分:


function btnClick1() {
 location.href = "jsCallBack://method_?param1¶m2"
}

 OC部分:


NSString *schem = webView.request.URL.scheme;
 if ([schem containsString:@"jsCallBack://"]) {
 //action...
 return NO;
 }

WKWebView与JS的交互方式

一,OC调用JS

调用苹果提供的API


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

使用方式:

OC部分:


[self.wkWebView evaluateJavaScript:@"playSount()" completionHandler:nil];

 JS部分:


function playSount() {
 //playSount...
}

二,JS调用OC

OC部分:

这种使用方式比较麻烦一些

1.在创建wkWebView时,需要将被js调用的方法注册进去


//创建WKWebViewConfiguration文件
 WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
 config.preferences.minimumFontSize = 10.f;
 [config.userContentController addScriptMessageHandler:self name:@"playSound"];
//创建WKWebView类
 WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];

 2.在WKScriptMessageHandler代理方法中监听js的调用


#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
 
 if ([message.name isEqualToString:@"playSound"]) {
  [self playSound];
 }
}