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&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)"];

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

总结

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