这篇文章主要为大家展示了“如何使用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的交互方式
一，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];
}
}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;
}
@end3.使用方式：
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)"];这三种使用方式可以根据实际情况进行适当使用
以上是“如何使用WKWebView、WebView和JS实现交互”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
