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

概述WKWebView、WebView和JS的交互方式详解 由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新控件 WKWebView. 相比与 UIWebView, WKWebView 存在很多优势: 支持更多的HTML5的特性 高达60fps滚动刷新频率与内置手势 与Safari相容的JavaScript引擎 在性能.稳定性方面有很大提升占用内存更少 协议方法及功能都更细致 可获取加载进度等. UIWebView与JS的交互方

由于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&param2"}

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]; }}

Js部分：

//Js响应事件function btnClick() { window.webkit.messageHandlers.playSound.postMessage(null);}

利用JavaScriptCore库，WebVIEw与Js的交互

一，OC调用Js

self.JsContent = [[jscontext alloc] init];Nsstring *Js = @"function add(a,b) {return a + b}";[self.JsContent evaluateScript:Js];JsValue *JsValue = [self.JsContent[@"add"] callWithArguments:@[@2,@3]];

二，Js调用OC

self.JsContent = [[jscontext alloc] init];self.JsContent[@"add"] = ^(int a,int b){ NSLog(@"a+b = %d",a+b);};[self.JsContent evaluateScript:@"add(10,20)"];

三，Js直接访问OC对象方法与属性

1.首先定义一个协议，这个协议遵守JsExport协议

@protocol JsExportTest <JsExport>@property (nonatomic,assign) NSInteger sum;JsExportAs(add,- (NSInteger)add:(int)a b:(int)b);@end

其中JsExportAs（）是系统提供的宏，用来声明在Js环境中方法add与OC环境中方法- (NSInteger)add:(int)a b:(int)b对应。

2.创建一类，遵守JsExportTest协议，并实现它什么的方法与属性

@interface JsProtolObj : NSObject <JsExportTest>@end@implementation JsProtolObj@synthesize sum = _sum;- (NSInteger)add:(int)a b:(int)b { return a+b;}- (voID)setSum:(NSInteger)sum { _sum = sum;}@end

3.使用方式：

self.JsContent = [[jscontext alloc] init];self.JsContent.exceptionHandler = ^(jscontext *context,JsValue *exception) { [jscontext currentContext].exception = exception; NSLog(@"exception:%@",exception);};self.JsContent[@"OCobj"] = self.JsProtolObj;[self.JsContent evaluateScript:@"OCobj.sum = OCobj.add(10,20)"];

这三种使用方式可以根据实际情况进行适当使用

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

您可能感兴趣的文章:ios下OC与Js交互之WKWebVIEwIOS中UIWebVIEw、WKWebVIEw之Js交互Js交互点击WKWebVIEw中的图片实现预览效果 总结

以上是内存溢出为你收集整理的WKWebView、WebView和JS的交互方式详解全部内容，希望文章能够帮你解决WKWebView、WebView和JS的交互方式详解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。