JS和UIWebview以及WKWebView的交互

最近做了几个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中。这个是最蛋疼的事情了。