当前位置：首页 > 编程日记 > 正文

iOS与JS交互的4种方法

编程日记 2024-08-19 17:00:00

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.absoluteString hasPrefix:@"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('我是扫描结果~')"];

方法二. 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 <Foundation/Foundation.h>
\#import <JavaScriptCore/JavaScriptCore.h>@protocol AppJSObjectDelegate <JSExport>-(void)scan:(NSString *)message;@end@interface AppJSObject : NSObject<AppJSObjectDelegate>@property(nonatomic,weak) id<AppJSObjectDelegate> delegate;@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->appfunction scan(){app.scan('scanResult');}//扫描结果回调方法    app->h5function scanResult(result){document.getElementById("result").innerHTML = '扫描结果：' + result;  }
</script>

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

-(void)webViewDidFinishLoad:(UIWebView *)webView
{JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];AppJSObject *jsObject = [AppJSObject new];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"]) {//调用原生扫码}
}

方法四 WebViewJavascriptBridge

是一个第三方框架，官方文档和demo都很完整，不再累赘，GitHub地址：
https://github.com/marcuswestin/WebViewJavascriptBridge

https://www.dkcj.cn/info/14971.html

iOS与JS交互的4种方法

iOS与JS交互的方法：

方法一. 拦截url

（1）web调用原生：

（2）原生调用js

方法二. JavaScriptCore

（2）原生调用js

方法三. WKScriptMessageHandler

方法四 WebViewJavascriptBridge

相关文章：

UDP打洞原理

五款常用协议分析处理工具推荐

【转】android电池（四）：电池电量计(MAX17040)驱动分析篇

hihoCoder#1384 : Genius ACM

微信小程序开发笔记

简单两行，实现无线WiFi共享上网，手机抓包再也不用愁了

用C#实现的条形码和二维码编码解码器

【iOS】通过NSURLProtocol提高Web加载速度

rand()和srand()关系很简单——一看就明白(通过一个可移植的源码)

Windows下Python 3.6 安装BeautifulSoup库

struts2配置详解

Xcode调试技巧

MiniGUI - UNIX Domain Socket 封装

RSA加密算法破解及原理

SpringMvc之@RequestParam详解

MLeaksFinder简单实现原理

CSipSimple 工程分析 1

干货，Wireshark使用技巧-过滤规则

《图解HTTP》笔记之TCP/IP

JS --正则表达式验证、实战之邮箱模式

《ASP.NET MVC4 WEB编程》学习笔记------Web API 续

干货：Wireshark使用技巧-显示规则

【转载】Linux系统与性能监控

iOS端Socket连接、发送数据（一）

dataTable 从服务器获取数据源的两种表现形式

干货！链家二手房数据抓取及内容解析要点

Atitit.软件兼容性原理与实践 v3 q326.docx

用PULL解析器解析XML文件

iOS端Socket（二）ProtocolBuffer使用

Wireshark分析实战：某达速递登录帐号密码提取