iOS与JS交互的4种方法

iOS与JS交互的方法：

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.absoluteStringhasPrefix:@"jxaction://scan"]) {

//调用原生扫描二维码returnNO;    

}returnYES;}

h5代码：

扫一扫(拦截url)

（2）原生调用js

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

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

方法二. JavaScriptCore

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

（1）js调用原生 

<1>新建类继承自NSObject（如AppJSObject）。 

<2>.h文件中声明一个代理并遵循JSExport，代理内的方法和js定义的方法名一致。 

<3>.m文件中实现<2>代理中对应的方法，可以在方法内处理事件或通知代理。

AppJSObject.h

\#import\#import

@protocol

AppJSObjectDelegate

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

@end

@interfaceAppJSObject:NSObject

@property(nonatomic,weak)id delegate;

@end

AppJSObject.m

#import"AppJSObject.h"@implementationAppJSObject-(void)scan:(NSString*)message{    [self.delegatescan:message];

}

@end

h5代码：

扫描结果：//调用APP的扫描方法 

 h5->appfunctionscan(){

app.scan('scanResult');    

}

//扫描结果回调方法    

app->h5functionscanResult(result){

document.getElementById("result").innerHTML ='扫描结果：'+ result;     

 }

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

-(void)webViewDidFinishLoad:(UIWebView *)webView{   

 JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];    

AppJSObject *jsObject = [AppJSObjectnew];   

 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= [NSStringstringWithFormat:@"%@('%@')",_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.userContentControlleraddScriptMessageHandler:self name:@"scan"];

WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frameconfiguration: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"]){      

  //调用原生扫码   

 }}

方法四 WebViewJavascriptBridge

是一个第三方框架，官方文档和demo都很完整，不再累赘，GitHub地址： 

https://github.com/marcuswestin/WebViewJavascriptBridge

简书代码格式混乱，建议看原文，我这里只是给自己留个备份

原文：https://blog.csdn.net/dolacmeng/article/details/79623708