最近做了几个hybrid的应用,有一些JS和Webview的交互经验得总结下:
看了很多大框架源码,无论是cordova还是WebViewJavascriptBridge他们核心的通信方式就都是 假跳转请求拦截
下面我们就慢慢分析:
一、WebViewJavascriptBridge分析
1,首先讲讲为什么需要WebViewJavascriptBridge:
WebViewJavascriptBridge同时支持UIWeView和WKWebView,兼容性好,无论是JS调用OC还是OC调用JS,都可以正常传值和返回值;而且在页面加载时只要JS代码被运行就可以进行交互,而不像UIwebview和WkWebview中主动调evaluatejs方法那样一定要等到webview加载结束才能够oc调用js
2,WebViewJavascriptBridge的使用
https://github.com/marcuswestin/WebViewJavascriptBridge
github上的demo讲得很详细,调用其实也很简单,无论js端还是oc端主要两个方法:
例:
bridge.registerHandler('JS Echo', function(data, responseCallback) {
console.log("JS Echo called with:", data)
responseCallback(data)
})
bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
3,WebViewJavascriptBridge的原理:
(1)分别在OC环境和javascript环境都保存一个bridge对象,里面维持着requestId,callbackId,以及每个id对应的具体实现。
(2)OC通过javascript环境的window.WebViewJavascriptBridge
对象来找到具体的方法,然后执行。
(3) javascript通过改变iframe的src触发webview的代理方法从而实现把javascript消息发送给OC这个功能。
webView:(WKWebView*)webView decidePolicyForNavigationAction:(WKNavigationAction*)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
js调用oc的核心:假跳转请求拦截
4,WebViewJavascriptBridge的缺点:
其实也是假跳转请求拦截方案的缺点,就是丢失通信消息
二、JavaScriptCore的使用
1,OC调用JS
-(void)OCCallJS{
self.context = [[JSContext alloc] init];
NSString *js = @"function add(a,b) {return a+b}";
[self.context evaluateScript:js];
JSValue *addJS = self.context[@"add"];
JSValue *sum = [addJS callWithArguments:@[@(10),@(17)]];
NSInteger intSum = [sum toInt32];
NSLog(@"intSum: %zi",intSum);
}
其实oc调用js很简单,主要是调用callWithArguments方法,上面的那段js可以通过从bundle中去取,也可以从远程下载,这样就可以动态地替换功能,比如js字符串里面是一个计算公式,那么可以动态替换,这也是一种热更新的方案。
2,js调用OC
(1)通过block方式
我们在OC中定义了一个如下方法,我们需要在JS中对它进行调用
-(NSInteger)add:(NSInteger)a and:(NSInteger)b{
return a+b;
}
block调用
-(void)JSCallOC_block{
self.context = [[JSContext alloc] init];
__weak typeof(self) weakSelf = self;
self.context[@"add"] = ^NSInteger(NSInteger a, NSInteger b){
return [weakSelf add:a and:b];
};
JSValue *sum = [self.context evaluateScript:@"add(4,5)"];
NSInteger intSum = [sum toInt32];
NSLog(@"intSum: %zi",intSum);
}
(2)JSExport protocol
给js注入一个实现了JSExport协议的对象
第一步:定义一个遵守JSExport的AddJSExport协议。
@protocol AddJSExport <JSExport>
//用宏转换下,将JS函数名字指定为add;
- (NSInteger)add:(NSInteger)a and:(NSInteger)b;
@property (nonatomic, assign) NSInteger sum;
@end
第二步:新建一个对象AddJSExportObj,去实现以上协议。
AddJSExportObj.h
@interface AddJSExportObj : NSObject< AddJSExport>
@property (nonatomic, assign) NSInteger sum;
@end
AddJSExportObj.m
@implementation AddJSExportObj
-(NSInteger)add:(NSInteger)a and:(NSInteger)b{
return a+b;
}
@end
第三步:在VC中进行JS调用
-(void)JSCallOC_JSExport{
self.context = [[JSContext alloc] init];
//异常处理
self.context.exceptionHandler = ^(JSContext *context, JSValue *exception){
[JSContext currentContext].exception = exception;
NSLog(@"exception:%@",exception);
};
self.addObj = [[AddJSExportObj alloc] init];
self.context[@"OCAddObj"] = self.addObj;//js中的OCAddObj对象==>OC中的AddJSExportObj对象
[self.context evaluateScript:@"OCAddObj.sum = OCAddObj.add(2,30)"];
NSLog(@"%zi",self.addObj.sum);
}
3,javascriptcore在uiwebview和wkwebview中的使用
首先在wkwebview中是取不到jscontext对象的,所以javascriptcore在wkwebview中使用不了。
只能在UIWebview中使用,主要是获取UIWebview中的
JSContext *context = [self.webView valueForKeyPath:@
"documentView.webView.mainFrame.javaScriptContext"
];
然后使用大致上面一样,要注意的就是oc调用js的时机必须是在webview加载内容结束了,即- (void)webViewDidFinishLoad:(UIWebView *)webView;方法中。
三、UIWebview的使用
1,OC调用js
一句话[webview stringByEvaluatingJavaScriptFromString:]
2,JS调用OC
通过假跳转请求拦截来实现的,
让js产生一个特殊的请求。可以让Native代码可以拦截到,而且不让用户察觉。业界一般的实现方案是在网页中加载一个隐藏的iframe来实现该功能,通过将iframe的src指定为一个特殊的URL
下面方法中
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
}
根据请求url中的内容,去截取scheme和host等作不同的处理,如下:
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSURL * url = [request URL];
if ([[url scheme] isEqualToString:@"alert"]) {//拦截请求,弹出自定义对话框
UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"test" message:[url host] delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
[alertView show];
return NO;
}else if([[url scheme] isEqualToString:@"tel"]){//拦截拨打电话请求
BOOL result = [[UIApplication sharedApplication] openURL:url];
if (!result) {
NSLog(@"您的设备不支持打电话");
} else {
NSLog(@"电话打了");
}
return NO;
}
return YES;
}
3,优缺点
优点是兼容性好
缺点是占用内存过大,加载缓慢,性能较差,支持js调用oc的方式不好
四、WKWebview的使用
1,oc调用js
也是一句话如下:
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ __nullable)(__nullable id, NSError * __nullable error))completionHandler;
2,JS调用OC
主要是通过addScriptMessageHandler方法来实现的
[config.userContentController addScriptMessageHandler:self name:@"collectSendKey"];
WKScriptMessageHandler协义的方法里面回调,如下:
- (void)userContentController:(WKUserContentController *)userContentController
didReceiveScriptMessage:(WKScriptMessage *)message {
}
具体使用举例
3,优缺点
优点:
1,在性能、稳定性、占用内存方面有很大提升;
2,加载速度提升
3,增加加载进度属性:estimatedProgress,不用在自己写假进度条了
4,可以和js直接互调函数,不像UIWebView需要第三方库WebViewJavascriptBridge来协助处理和js的交互
5,支持更多的html的属性
缺点:
1,WKWebView下面添加自定义View
因为我们有个需求是在网页下面在添加一个View,用来展示此链接内容的相关评论。在使用UIWebView的时候,做法非常简单粗暴,在UIWebView的ScrollView后面添加一个自定义View,然后根据View的高度,在改变一下scrollView的contentSize属性。以为WKWebView也可以这样简单粗暴的去搞一下,结果却并不是这样。
首先改变WKWebView的scrollView的contentSize属性,系统会在下一次帧率刷新的时候,再给你改变回原有的,这样这条路就行不通了。我马上想到了另一个办法,改变scrollView的contentInset这个系统倒不会在变化回原来的,自以为完事大吉。后来过了两天,发现有些页面的部分区域的点击事件无法响应,百思不得其解,最后想到可能是设置的contentInset对其有了影响,事实上正是如此。查来查去,最后找到了一个解决办法是,就是当页面加载完成时,在网页下面拼一个空白的div,高度就是你添加的View的高度,让网页多出一个空白区域,自定义的View就添加在这个空白的区域上面。这样就完美解决了此问题
2,ios9之前的坑比较多
(1)更改User-Agent
ios8下发现app内所有的web请求的User-Agent全部被更改了,在iOS9,WKWebView提供了一个非常便捷的属性去更改User-Agent,就是customUserAgent属性。这样使用起来不仅方便,也不会全局更改User-Agent,可惜的是iOS9才有,如果适配iOS8,还是要使用上面的方法
(2)读取本地html问题
当使用loadRequest来读取本地的HTML时,WKWebView是无法读取成功的,后台会出现如下的提示:Could not create a sandbox extension for /
原因是WKWebView是不允许通过loadRequest的方法来加载本地根目录的HTML文件。
而在iOS9的SDK中加入了以下方法来加载本地的HTML文件:[WKWebView loadFileURL:allowingReadAccessToURL:]
但是在iOS9以下的版本是没提供这个便利的方法的。以下为解决方案的思路,就是在iOS9以下版本时,先将本地HTML文件的数据copy到tmp目录中,然后再使用loadRequest来加载。但是如果在HTML中加入了其他资源文件,例如js,css,image等必须一同copy到temp中。这个是最蛋疼的事情了。