WKWebView、WebView和JS的交互方式详解
由于Xcode8发布之后，编译器开始不支持iOS7了，这样我们的app也改为最低支持iOS8.0，既然需要与web交互，那自然也就选择使用了iOS8.0之后才推出的新控件WKWebView.
相比与UIWebView,WKWebView存在很多优势：
- 支持更多的HTML5的特性
- 高达60fps滚动刷新频率与内置手势
- 与Safari相容的JavaScript引擎
- 在性能、稳定性方面有很大提升占用内存更少协议方法及功能都更细致
- 可获取加载进度等。
UIWebView与JS的交互方式
一，OC调用JS
直接调用苹果提供的API
-(nullableNSString*)stringByEvaluatingJavaScriptFromString:(NSString*)script;
使用方式：
OC部分：
[self.webViewstringByEvaluatingJavaScriptFromString:@"add(1,2)"];
JS部分：
functionadd(a,b){
returna+b;
}
二，JS调用OC
OC处理JS的时机在UIWebView的代理方法内
-(BOOL)webView:(UIWebView*)webViewshouldStartLoadWithRequest:(NSURLRequest*)requestnavigationType:(UIWebViewNavigationType)navigationType;
使用方式：
JS部分：
functionbtnClick1(){
location.href="jsCallBack://method_?param1¶m2"
}
OC部分：
NSString*schem=webView.request.URL.scheme;
if([schemcontainsString:@"jsCallBack://"]){
//action...
returnNO;
}
WKWebView与JS的交互方式
一，OC调用JS
调用苹果提供的API
-(void)evaluateJavaScript:(NSString*)javaScriptStringcompletionHandler:(void(^_Nullable)(_Nullableid,NSError*_Nullableerror))completionHandler;
使用方式：
OC部分：
[self.wkWebViewevaluateJavaScript:@"playSount()"completionHandler:nil];
JS部分：
functionplaySount(){
//playSount...
}
二，JS调用OC
OC部分：
这种使用方式比较麻烦一些
1.在创建wkWebView时，需要将被js调用的方法注册进去
//创建WKWebViewConfiguration文件 WKWebViewConfiguration*config=[[WKWebViewConfigurationalloc]init]; config.preferences.minimumFontSize=10.f; [config.userContentControlleraddScriptMessageHandler:selfname:@"playSound"]; //创建WKWebView类 WKWebView*webView=[[WKWebViewalloc]initWithFrame:self.view.boundsconfiguration:config];
2.在WKScriptMessageHandler代理方法中监听js的调用
#pragmamark-WKScriptMessageHandler
-(void)userContentController:(WKUserContentController*)userContentControllerdidReceiveScriptMessage:(WKScriptMessage*)message{
if([message.nameisEqualToString:@"playSound"]){
[selfplaySound];
}
}
JS部分：
//JS响应事件
functionbtnClick(){window.webkit.messageHandlers.playSound.postMessage(null);
}
利用JavaScriptCore库，WebView与JS的交互
一，OC调用JS
self.jsContent=[[JSContextalloc]init];
NSString*js=@"functionadd(a,b){returna+b}";
[self.jsContentevaluateScript:js];
JSValue*jsValue=[self.jsContent[@"add"]callWithArguments:@[@2,@3]];
二，JS调用OC
self.jsContent=[[JSContextalloc]init];
self.jsContent[@"add"]=^(inta,intb){
NSLog(@"a+b=%d",a+b);
};
[self.jsContentevaluateScript:@"add(10,20)"];
三，JS直接访问OC对象方法与属性
1.首先定义一个协议，这个协议遵守JSExport协议
@protocolJSExportTest@property(nonatomic,assign)NSIntegersum; JSExportAs(add,-(NSInteger)add:(int)ab:(int)b); @end
其中JSExportAs（）是系统提供的宏，用来声明在JS环境中方法add与OC环境中方法-(NSInteger)add:(int)ab:(int)b对应。
2.创建一类，遵守JSExportTest协议，并实现它什么的方法与属性
@interfaceJSProtolObj:NSObject@end @implementationJSProtolObj @synthesizesum=_sum; -(NSInteger)add:(int)ab:(int)b{ returna+b; } -(void)setSum:(NSInteger)sum{ _sum=sum; } @end
3.使用方式：
self.jsContent=[[JSContextalloc]init];
self.jsContent.exceptionHandler=^(JSContext*context,JSValue*exception){
[JSContextcurrentContext].exception=exception;
NSLog(@"exception:%@",exception);
};
self.jsContent[@"OCobj"]=self.jsProtolObj;
[self.jsContentevaluateScript:@"OCobj.sum=OCobj.add(10,20)"];
这三种使用方式可以根据实际情况进行适当使用
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。