iOS与JS交互的方法

1.拦截url（适用于UIWebView和WKWebView）

2.JavaScriptCore（只适用于UIWebView，iOS7+）

3.WKScriptMessageHandler（只适用于WKWebView，iOS8+）

4.WebViewJavascriptBridge（适用于UIWebView和WKWebView，属于第三方框架

1.拦截url（适用于UIWebView和WKWebView）

（1）web调用原生：

和后端同事协定好协议，如jxaction://scan表示启动二维码扫描，jxaction://location表示获取定位。

实现 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"]){//调用原生扫描二维码returnNO;}returnYES;}

（2）原生调用 js

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

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

2. JavaScriptCore （uiwebview弃用）

3. WKScriptMessageHandler

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

JS 与 iOS 约定好方法，用作 JS 在调用 iOS 时的方法，如 scan:

iOS 使用 WKUserContentController 的-addScriptMessageHandler:name:方法监听 name 为 scan 的消息；

JS通过window.webkit.messageHandlers. scan.postMessage()的方式对scan 方法发送消息；

iOS在-userContentController:didReceiveScriptMessage:方法中读取 name 为 scan 的消息数据 message.body。

-(void)setupWKWebView{WKWebViewConfiguration*configuration=[[WKWebViewConfiguration alloc]init];configuration.userContentController=[[WKUserContentController alloc]init];[configuration.userContentController addScriptMessageHandler:selfname:@"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:方法来实现的。

4. WebViewJavascriptBridge 和 DSBridge

GitHub地址：

DSBridge-IOS

WebViewJavascriptBridge(ios)

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

DSBridge vs WebViewJavascriptBridge

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

跨平台；同时支持ios和android。

双向调用；js可以调用native， native可以调用js

不仅支持异步调用，而且页支持同步调用（dsbridge是唯一一个支持同步调用的javascript bridge）

支持进度回调，多次返回（常用于文件下载进度、计时器等）

Android支持腾讯x5内核

三端易用；无论是前端还是android或ios，使用都非常简单，极大的降低集成／学习成本

作者：6ffd6634d577

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

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。