欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-18 18:37:28
由于xcode8发布之后,编译器开始不支持ios 7了,这样我们的app也改为最低支持ios 8.0,既然需要与web交互,那自然也就选择使用了 ios 8.0之后 才推出...

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

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

总结

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

上一篇:

下一篇: