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

所属分类: 软件编程 / IOS 阅读数: 1877
收藏 0 赞 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)"];

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

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

更多精彩内容其他人还在看

iOS开发笔记--详解UILabel的相关属性设置

这篇文章主要介绍了iOS开发笔记--详解UILabel的相关属性设置,对初学者具有一定的参考价值,有需要的可以了解一下。
收藏 0 赞 0 分享

iOS中获取系统相册中的图片实例

这篇文章主要介绍了iOS中获取系统相册中的图片实例,具有一定的参考价值没有需要的朋友可以了解一下。
收藏 0 赞 0 分享

iOS 检测网络状态的两种方法

一般有Reachability和AFNetworking监测两种方式,都是第三方的框架,下文逐一详细给大家讲解,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

IOS 性能优化中离屏渲染

本文主要介绍了IOS 性能优化中离屏渲染的资料,提供了几种方法讲解了优化,有需要的小伙伴可以参考下
收藏 0 赞 0 分享

iOS获取当前设备型号等信息(全)包含iPhone7和iPhone7P

这篇文章主要介绍了iOS获取当前设备型号设备信息的总结包含iPhone7和iPhone7P,包括ios7之前之后的获取方式,本文接的非常详细,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

iOS实现爆炸的粒子效果示例代码

之前在网上看到了一个Android实现的爆炸效果,感觉非常不错,所以自己尝试用iOS来实现下效果,现在将实现的过程、原理以及遇到的问题分享给大家,有需要的朋友们可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

iOS毕业设计之天气预报App

这篇文章主要为大家详细介绍了iOS毕业设计之天气预报App,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS轻点、触摸和手势代码开发

这篇文章主要为大家详细介绍了iOS轻点、触摸和手势代码开发,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS 实现多代理的方法及实例代码

这篇文章主要介绍了iOS 实现多代理的方法及实例代码的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

iOS文字渐变色效果的实现方法

在大家日常开发iOS的过程中,可能会遇到要实现文字渐变色的效果,这篇文章文章通过示例代码和详细的步骤介绍了如何利用iOS实现文字渐变色的效果,实现后的很不错,感兴趣的朋友们下面来一起看看吧。
收藏 0 赞 0 分享
查看更多