前言
做项目过程中,后台人员想在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 <JSExport>
/// 复制字符串到剪切板
- (void)copy:(NSString *)copyStr;
@end
@interface YSNativeAPI : NSObject <YSNativeAPIDelegate>
+ (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