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

2025-05-29 0 63

由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新控件 WKWebView.

相比与 UIWebView, WKWebView 存在很多优势:

  • 支持更多的HTML5的特性
  • 高达60fps滚动刷新频率与内置手势
  • 与Safari相容的JavaScript引擎
  • 在性能、稳定性方面有很大提升占用内存更少 协议方法及功能都更细致
  • 可获取加载进度等。

UIWebView与JS的交互方式

一,OC调用JS

直接调用苹果提供的API

?

1
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

使用方式:

OC部分:

?

1
[self.webView stringByEvaluatingJavaScriptFromString:@"add(1,2)"];

JS部分:

?

1

2

3
function add(a,b) {

return a+b;

}

二,JS调用OC

OC处理JS的时机在UIWebView的代理方法内

?

1
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

使用方式:

JS部分:

?

1

2

3
function btnClick1() {

location.href = "jsCallBack://method_?param1&param2"

}

OC部分:

?

1

2

3

4

5
NSString *schem = webView.request.URL.scheme;

if ([schem containsString:@"jsCallBack://"]) {

//action...

return NO;

}

WKWebView与JS的交互方式

一,OC调用JS

调用苹果提供的API

?

1
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;

使用方式:

OC部分:

?

1
[self.wkWebView evaluateJavaScript:@"playSount()" completionHandler:nil];

JS部分:

?

1

2

3
function playSount() {

//playSount...

}

二,JS调用OC

OC部分:

这种使用方式比较麻烦一些

1.在创建wkWebView时,需要将被js调用的方法注册进去

?

1

2

3

4

5

6
//创建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的调用

?

1

2

3

4

5

6

7
#pragma mark - WKScriptMessageHandler

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {

if ([message.name isEqualToString:@"playSound"]) {

[self playSound];

}

}

JS部分:

?

1

2

3
//JS响应事件

function btnClick() { window.webkit.messageHandlers.playSound.postMessage(null);

}

利用JavaScriptCore库,WebView与JS的交互

一,OC调用JS

?

1

2

3

4

5
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

?

1

2

3

4

5

6
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协议

?

1

2

3

4

5
@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协议,并实现它什么的方法与属性

?

1

2

3

4

5

6

7

8

9

10

11

12
@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.使用方式:

?

1

2

3

4

5

6

7

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

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

总结

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 WKWebView、WebView和JS的交互方式详解 https://www.kuaiidc.com/89722.html

相关文章

发表评论
暂无评论