iOS H5页面通过js对象调用原生方法

前言

做项目过程中，后台人员想在H5页面直接调用一个js方法来实现iOS系统的复制功能。对webView熟悉的朋友可能马上会想到UIWebView的代理方法shouldStartLoadWithRequest。如果后台发给我一个请求，我可以通过这个代理方法截获这个特殊请求，从而实现页面想要的复制功能。但是现在后台不想在H5页面发任何请求，他们只想在H5页面直接调用js方法就实现复制功能。乍一看，这怎么可能呢？不过通过查找资料，这个方案确实可以实现。

UIWebView加载的H5页面通过JS方法来调用原生方法

Cocoa已经为我们提供了JS和原生API交互的框架：JavaScriptCore.framework。我们只需要：
1.新建一个类和一个协议，该协议遵守协议JSExport，使新建类遵守这个自定义协议。协议里的方法便是js对象要调用的方法。
2.通过JSContext把js对象和oc对象进行绑定。
主要代码如下：

/// js方法需要调用的方法均需要在此协议中实现
@protocol YSNativeAPIDelegate 

/// 复制字符串到剪切板
- (void)copy:(NSString *)copyStr;
@end

@interface YSNativeAPI : NSObject 

+ (void)configureWithWebView:(UIWebView *)webView andJSObject:(NSString *)jsObj;

@end

@implementation YSNativeAPI

#pragma mark - call methods
+ (void)configureWithWebView:(UIWebView *)webView andJSObject:(NSString *)jsObj {
    JSContext *jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    YSNativeAPI *nativeObj = [YSNativeAPI new];
    jsContext[jsObj] = nativeObj;
}

#pragma mark - delegate methods
- (void)copy:(NSString *)copyStr {
    // copy string to pasteboard
    UIPasteboard *pasteboard = [UIPasteboard generalPasteboard];
    pasteboard.string = copyStr;
}

@end

调用代码：

// 调用此方法后，webView加载的H5页面就可以直接通过JS对象“Xing”来调用YSNativeAPI里的代理方法
    [YSNativeAPI configureWithWebView:self.webView andJSObject:@"Xing"];

我做了一个demo放到了GitHub上，有需要的同学可以下载参考，地址如下：
GitHub