iOS与JS交互的4中方法
iOS与JS交互的方法:
1.拦截url (适用于UIWebView和WKWebView)
2.JavaScriptCore (只适用于UIWebView, iOS7+)
3.WKScriptMessageHandler(只适用与WKWebView, iOS8+)
4.WebViewJavascriptBridge (适用于UIWebView和WKWebView, 属于第三方框架.以后会单讲这个框架)
方法一.拦截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 isEqualToString:@"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('我是扫描结果~')"];
[self.wkWebView evaluateJavaScript:@"scanResult" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
//回调结果
}];
方法二. JavaScriptCore
方法一web调用原生只适合简单的调用，如果要传递参数, 虽然也可以拼接在url上, 如jxaction://scan?method=aaa, 但是需要我们自行对字符串进行分割解析，并且特殊字符需要编码。在iOS7系统提供了JavaSciptCore，可以更优雅地实现js与原生交互.
(1) js调用原生
<1>新建类继承自NSObject(如AppJSObject)
<2>.h文件中声明一个代理并遵循JSExport，代理内的方法和js定义的方法名一致.
<3>.m文件中实现<2>代理中对应的方法，可以在方法内处理事件或通知代理.
AppJSObject.h
#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
NS_ASSUME_NONNULL_BEGIN
@protocol AppJSObjectDelegate <JSExport>
- (void)scan:(NSString *)message;
@end
@interface AppJSObject : NSObject
@property (nonatomic, weak) id<AppJSObjectDelegate> delegate;
@end
NS_ASSUME_NONNULL_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实例对象中对应的方法了。
//将AppJSObject实例注入到JS中 那么在js中调用方法就会调用到原生AppJSObject实例对象中对应的方法了。
- (void)webViewDidFinishLoad:(UIWebView *)webView{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
AppJSObject *jsObject = [[AppJSObject alloc] init]; //AppJSObject的实例
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>初始化WKWebView时，调用addScriptMessageHandler:name:方法，name为js中的方法名，如scan:
- (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()
<2>实现WKScriptMessageHandler代理方法，当js调用scan方法时，会回调此代理方法：
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
if ([message.name isEqualToString:@"scan"]) {
//调用原生扫码
}
}
实现原理：
1、JS与iOS约定好scan方法，用作JS在调用iOS时的方法；
2、iOS使用WKUserContentController的-addScriptMessageHandler:name:方法监听name为scan的消息；
3、JS通过window.webkit.messageHandlers.jsToOc.postMessage()的方式对scan方法发送消息；
4、iOS在-userContentController:didReceiveScriptMessage:方法中读取name为scan的消息数据message.body
PS：[userContentController addScriptMessageHandler:self name:@"scan"]会引起循环引用问题。一般来说，在合适的时机removeScriptMessageHandler可以解决此问题。比如：在-viewWillAppear:方法中执行add操作，在-viewWillDisappear:方法中执行remove操作。如下：
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[_webView.configuration.userContentController addScriptMessageHandler:self name:@"scan"];
}
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
[_webView.configuration.userContentController removeScriptMessageHandlerForName:@"scan"];
}
方法四 WebViewJavascriptBridge
是一个第三方框架, 官方文档和demo都很完整, 不再累赘, GitHub地址:
https://github.com/marcuswestin/WebViewJavascriptBridge
