iOS web 、原生 js 交互：方法及原理

参考链接：https://www.jianshu.com/p/fec29596b8e7

四种方法 链接里介绍的很清楚了：

1.拦截url（适用于UIWebView和WKWebView） 
2.JavaScriptCore（只适用于UIWebView，iOS7+） 
3.WKScriptMessageHandler（只适用于WKWebView，iOS8+） 
4.WebViewJavascriptBridge（适用于UIWebView和WKWebView，属于第三方框架）
//--------详细介绍---------

下面以假设的需求进行示例代码讲解，需求： 
（1）h5页面调用原生扫二维码（h5调用原生） 
（2）原生扫码成功后，将结果返回给h5（原生调用h5）

方法一. 拦截url

（1）web调用原生：

<1>和后端同事协定好协议，如jxaction://scan表示启动二维码扫描，jxaction://location表示获取定位。 
<2>实现UIWebView代理的shouldStartLoadWithRequest:navigationType:方法，在方法中对url进行拦截，如果是步奏<1>中定义好的协议则执行对应原生代码，返回false，否则返回true继续加载原url。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    if ([request.URL.absoluteString hasPrefix:@"jxaction://scan"]) {
        //调用原生扫描二维码
       return NO;
    }
    return YES;
}

h5代码：

<a href="jxaction://scan">扫一扫(拦截url)</a>

（2）原生调用js

若（1）中扫描二维码结束后，需要把扫描结果返回给web页，直接调用UIWebView的stringByEvaluatingJavaScriptFromString:方法，或者WKWebView的 evaluateJavaScript:completionHandler:方法。

[self.webView stringByEvaluatingJavaScriptFromString:@"scanResult('我是扫描结果~')"];

方法二. JavaScriptCore

方法一web调用原生只适合简单的调用，如果要传递参数，虽然也可以拼接在url上，如jxaction://scan?method=aaa，但是需要我们自行对字符串进行分割解析，并且特殊字符需要编码。在iOS7系统提供了JavaScriptCore，可以更优雅地实现js与原生的交互。 

其中JavaScriptCore 框架的参考链接：

https://blog.csdn.net/weixin_34326179/article/details/89581534

（1）js调用原生 
<1>新建类继承自NSObject（如AppJSObject）。 
<2>.h文件中声明一个代理并遵循JSExport，代理内的方法和js定义的方法名一致。 
<3>.m文件中实现<2>代理中对应的方法，可以在方法内处理事件或通知代理。

AppJSObject.h

\#import <Foundation/Foundation.h>
\#import <JavaScriptCore/JavaScriptCore.h>

@protocol AppJSObjectDelegate <JSExport>

-(void)scan:(NSString *)message;

@end

@interface AppJSObject : NSObject<AppJSObjectDelegate>

@property(nonatomic,weak) id<AppJSObjectDelegate> delegate;

@end

AppJSObject.m

#import "AppJSObject.h"

@implementation AppJSObject

-(void)scan:(NSString *)message{
    [self.delegate scan:message];
}

@end

h5代码：

<input type="button" name="" value="扫一扫" onclick="scan()">
<br/>
<p id="result">扫描结果：</p>

<script type="text/javascript">
    //调用APP的扫描方法   h5->app
    function scan(){
        app.scan('scanResult');
    }

    //扫描结果回调方法    app->h5
    function scanResult(result){
        document.getElementById("result").innerHTML = '扫描结果：' + result;  
    }
</script>

<4>在UIWebView加载完成的代理中把AppJSObject实例对象类注入到JS中，那么在js中调用方法就会调用到原生AppJSObject实例对象中对应的方法了。

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
    JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    AppJSObject *jsObject = [AppJSObject new];
    jsObject.delegate = self;
    context[@"app"] = jsObject;

}

代码：https://github.com/dolacmeng/JSDemo/tree/master 
*也可以通过block实现而不创建新类AppJSObject:

context[@"openAlbum"] = ^(){
    NSLog(@"js调用oc打开相册");
};

（2）原生调用js

可以通过方法一中的方法，也可以通过JSContext：

JSContext *context=[_mainWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *alertJS= [NSString stringWithFormat:@"%@('%@')",_photoMethod,fileUrl];
[context evaluateScript:alertJS];

方法三：WKScriptMessageHandler

现在很多 app 都是支持 iOS8+，很多人使用WKWebView代替了UIWebView，但是WKWebView并不支持方法二。此时我们可以使用WKWebView的WKScriptMessageHandler

1. JS 与 iOS 约定好方法，用作 JS 在调用 iOS 时的方法，如 scan:
2. iOS 使用 WKUserContentController 的 -addScriptMessageHandler:name:方法监听 name 为 scan 的消息；
3. JS通过 window.webkit.messageHandlers. scan.postMessage() 的方式对scan 方法发送消息；
4. iOS在-userContentController:didReceiveScriptMessage:方法中读取 name 为 scan 的消息数据 message.body。

- (void)setupWKWebView{
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    configuration.userContentController = [[WKUserContentController alloc] init];
    [configuration.userContentController addScriptMessageHandler:self name:@"scan"];

    WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
    webView.UIDelegate = self;
}

h5:

window.webkit.messageHandlers.scan.postMessage() 

实现WKScriptMessageHandler代理方法，当js调用scan方法时，会回调此代理方法：

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    if ([message.name isEqualToString:@"scan"]) {
        //调用原生扫码
     }
}

iOS调用JS方式与方法一中一致，都是通过 WKWebView 的 -evaluateJavaScript:completionHandler: 方法来实现的。

问题: 在使用WKWebView时与h5交互时，监听了h5的事件，让h5可以调用OC方法。退出页面后发现WKWebView没有被释放。

循环引用的原因

 

经典的解决方案

增加一个中间类去弱引用WKWebView，断开环即可。CMWebWeakScriptMessageDelegate的代码:

#import <Foundation/Foundation.h>
#import <WebKit/WebKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface CMWebWeakScriptMessageDelegate : NSObject<WKScriptMessageHandler>
@property (nonatomic, weak) id<WKScriptMessageHandler> scriptDelegate;
- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate;
@end

NS_ASSUME_NONNULL_END

#import "CMWebWeakScriptMessageDelegate.h"

@implementation CMWebWeakScriptMessageDelegate

- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate {
    self = [super init];
    if (self) {
        _scriptDelegate = scriptDelegate;
    }
    return self;
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    [self.scriptDelegate userContentController:userContentController didReceiveScriptMessage:message];
}

@end

方法四： WebViewJavascriptBridge 和 DSBridge 

GitHub地址：

DSBridge-IOS
WebViewJavascriptBridge(ios)

可以参考一下这两个三方库的比较：
DSBridge vs WebViewJavascriptBridge

DSBridge 是H5页面与Native之间通信的桥梁，它有如下特点：

1. 跨平台；同时支持ios和android。
2. 双向调用；js可以调用native， native可以调用js
3. 不仅支持 异步 调用，而且页支持 同步 调用（dsbridge是唯一一个支持同步调用的javascript bridge）
4. 支持进度回调，多次返回（常用于文件下载进度、计时器等）
5. Android支持腾讯x5内核
6. 三端易用；无论是前端还是android或ios，使用都非常简单，极大的降低集成／学习成本

4.1 WebViewJavascriptBridge 原理：

https://www.jianshu.com/p/d45ce14278c7

4.2 DSBridge 原理：略