iOS与H5交互 H5与App原生交互，一般会是前端页面中的JavaScript与App使用的原生开发语言的交互。技术方案应能达到以下要求： 在js与原生进行交互的时候能保证正常的正向调用逻辑返回
2017-11-08 10:45
1951 查看
iOS与H5交互
转自：http://www.cnblogs.com/fengmin/p/6558109.htmlH5与App原生交互，一般会是前端页面中的JavaScript与App使用的原生开发语言的交互。技术方案应能达到以下要求：
在js与原生进行交互的时候能保证正常的正向调用逻辑返回，反向可以处理异步回调，因为对js来说，大部分逻辑都是回调与监听。
要保证H5与Native App通讯效率高、安全性强，能有效防止通过H5页面进行App注入、中间人攻击或者钓鱼。
方便测试阶段，H5嵌入到App当中，开发人员方便调试与Debug。
在iOS控制器中加载UIWebView，设置代理，遵守UIWebViewDelegate协议。
self.webView = [[UIWebView alloc] initWithFrame:self.view.frame]; _webView.delegate = self; _webView.scalesPageToFit = YES; [self.view addSubview:_webView]; NSURL * url = [NSURL URLWithString:@"file:///Users/feng/Desktop/11.html"]; NSURLRequest * request = [NSURLRequest requestWithURL:url]; [_webView loadRequest:request];
1、iOS调用JS方法
通过iOS调用JS代码实现起来比较方便直接调用UIWebView的方法- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
1.查询标签
// 查询标签
NSString *str = @"var word = document.getElementById('word');"
@"alert(word.innerHTML)";
[webView stringByEvaluatingJavaScriptFromString:str];
2.为网页添加标签：
NSString *str = @"var img = document.createElement('img');"
"img.src = 'icon5.jpg';"
"img.width = 300;"
"img.heigth = 100;"
"document.body.appendChild(img);";
[webView stringByEvaluatingJavaScriptFromString:str];
3.删除网页标签：
// 删除标签
NSString *str1 = @"var word = document.getElementById('word');"
@"word.remove();";
[webView stringByEvaluatingJavaScriptFromString:str1];
4.更改标签：
// 更改
NSString *str2 = @"var change = document.getElementsByClassName('change')[0];"
"change.innerHTML = 'hello';";
NSString *result = [webView stringByEvaluatingJavaScriptFromString:str2];
HTML端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iOS和H5交互</title>
</head>
<body>
<p id="word">6666666666</p>
<ul>
<li class="change">111111</li>
<li class="haha">222222</li>
<li>333333</li>
<li>444444</li>
</ul>
<input class="name" placeholder="请输入密码">
<button onclick="buttonClick()">提交信息</button>
<script type="text/javascript">
alert('这个一个弹框');
</script>
</body>
</html>//获取网页地址
NSString * currentURL = [_webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
NSLog(@"%@",currentURL);
//获取标题
NSString * title = [_webView stringByEvaluatingJavaScriptFromString:@"document.title"];
NSLog(@"%@",title);
//插入js代码
[_webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"
"script.type = 'text/javascript';"
"script.text = \"function myFunction(){"
"var field = document.getElementsByName('q')[0];"
"field.value = 'dfjlsajfljsdkl';"
"document.forms[0].submit();"
"}\";"
"document.getElementsByTagName('head')[0].appendChild(script);"];
NSLog(@"js:%@",[_webView stringByEvaluatingJavaScriptFromString:@"myFunction();"]);
//提交表单
NSString * res = [_webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit();"];
NSLog(@"%@",res);2、JS调用iOS方法
目前主流的技术方案：
在iOS7以前，在UIWebView中实现一些代理方法拦截带有约定好的protocol的Url，从Url上获取get方式的参数传递，映射成本地原生方法，如下：1）第一种方法比较简单，通过字符串的比对。这种方式iOS端代码比较简单，网页加载完成后后台需要重新定义网页url，将移动端需要的参数拼接到url上返回，或者按照和后台约定好的字段来进行字符串比对以达到调用iOS方法的目的。下面贴代码。
oc代码：（需要实现webView的协议）
// 拦截协议头，调取系统摄像头
#pragma mark UIWebViewDelegate
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType: (UIWebViewNavigationType)navigationType
{
NSString *str = request.URL.absoluteString;
if ([str containsString:@"wxd://"]) {
[self getImage];
}
return YES;
}
- (void)getImage
{
if([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypePhotoLibrary]) { //调用相册
//实例化控制器
UIImagePickerController *picker = [[UIImagePickerController alloc] init];
picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
picker.delegate = self;
// 是否有图片选取框
picker.allowsEditing = YES;
[self presentViewController:picker animated:YES completion:nil];
}
}
HTML端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在html中调用oc的方法</title>
</head>
<body>
<button onclick="getImage()">访问相册</button>
<script type="text/javascript">
function getImage(){
window.location.href = "wxd://getImage";
}
</script>
</body>
</html>-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSString *urlString = request.URL.absoluteString;
if ([urlString rangeOfString:@"js-call://"].location != NSNotFound) {
NSString * host = [self sliceHost:urlString];
NSDictionary * params = [self sliceParams:urlString];
if ([host isEqualToString:@"openOrderDetail"]) {
[self openOrderDetail:params];
}
return NO;
}
return YES;
}这仅仅解决了js调用原生方法的问题，至于调用的结果与调用完之后要进行一些页面的回调，在这个拦截的过程中根本没有办法进行，不过有一些蹩脚的补偿措施，如下：
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
self.orderDetailCallBackFuncName = [webView stringByEvaluatingJavaScriptFromString:@"orderCallbackfuncName()"];
}会在页面加载完毕后主动去取页面上设置的回调方法的名称，然后在原生方法中处理完逻辑再进行回调。
-(void)OpenOrderDetail:(NSDictionary *)params{
//do someting
[self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"%@()",self.orderDetailCallBackFuncName ]];
}iOS7以后，大家都使用JavaScriptCore这个官方的WebKit 的 JavaScript 引擎，实现oc与JavaScript的语言穿梭。
2）第二种方法，JS直接用oc方法名来调用oc方法
头文件需要导入#import <JavaScriptCore/JavaScriptCore.h>。
首先创建一个继承自NSObject的类，在这里我命名为JSTestObjext，.h代码如下：
import <Foundation/Foundation.h> #import <JavaScriptCore/JavaScriptCore.h> @protocol JSTestObjectProtocol <JSExport> - (void)CallOCFunction; - (void)CallOCFunctionFirstParameter:(NSString *)parameter; - (void)CallOCFunctionFirstParameter:(NSString *)parameter1 SecondParameter:(NSString *)parameter2; @end @interface JSTestObjext : NSObject <JSTestObjectProtocol> @end
//.m中实现协议方法，代码如下：
#import "JSTestObjext.h"
@implementation JSTestObjext
- (void)CallOCFunction {
NSLog(@"CallOCFunction");
}
- (void)CallOCFunctionFirstParameter:(NSString *)parameter {
NSLog(@"CallOCFunctionFirstParameter:%@",parameter);
}
- (void)CallOCFunctionFirstParameter:(NSString *)parameter1 SecondParameter:(NSString *)parameter2 {
NSLog(@"CallOCFunctionFirstParameter:%@ SecondParameter:%@",parameter1,parameter2);
}
@end之后在加载webView的控制器中调用：
#import "ViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>
#import "JSTestObjext.h"
@interface ViewController ()<UIWebViewDelegate>
@property (nonatomic, strong) UIWebView * webView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.webView = [[UIWebView alloc] initWithFrame:self.view.frame]; _webView.delegate = self; _webView.scalesPageToFit = YES; [self.view addSubview:_webView]; NSURL * url = [NSURL URLWithString:@"file:///Users/feng/Desktop/11.html"]; NSURLRequest * request = [NSURLRequest requestWithURL:url]; [_webView loadRequest:request];
JSContext * context = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
JSTestObjext * test = [JSTestObjext new];
context[@"testObject"] = test;
}
到此为止，oc代码就已经写完了，我们只需告诉JS端使用testobject类，就可以调oc的方法了。下面附上JS调用的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在html中调用oc的方法</title>
<script type="text/javascript">
testObject.CallOCFunction();
testObject.CallOCFunctionFirstParameter('参数1');
testObject.CallOCFunctionFirstParameterSecondParameter('参数A','参数');
</script>
</head>
<body>
<button type="button" onclick="secondClick">Click Me!</button>
</body>
</html>
iOS与H5交互遇到的坑
3、iOS7以后，大家都使用JavaScriptCore这个官方的WebKit 的 JavaScript 引擎，实现oc与JavaScript的语言穿梭。-(void)configJsCallBack{
WeakSelf;
self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
self.jsContext.exceptionHandler = ^(JSContext * con,JSValue * exception){
NSLog(@"JS Error:%@",exception);
};
Coordinator * coordinator = [[Coordinator alloc]init];
self.jsContext[@"mobileCoordinator"] = coordinator;
self.jsContext[@"console"] = coordinator;
}这里我们使用一些技巧，将所有的App开放给js的方法都由一个叫Coordinator的调度器来调度，而这个调度器实现了JSExport协议：
#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
@protocol CoordinatorExport <JSExport>
-(void)log:(NSString *)msg;
-(BOOL)callNativeModule:(NSString *)url;
/*
js调用原生分享
shareOpinion为json对象
{
"type":"share",
"title":"share title",
"content":"share content",
"imgUrl":"",
"clickUrl":""
}
其中类型type有以下几种:
share(只有朋友圈和微信好友),doubleShare(包含所有分享渠道),allShare(分享全部渠道)
*/
JSExportAs(showShareMenu, -(BOOL)showShareMenu:(NSString *)url opinion:(NSString *)opinion);
@end
@interface Coordinator : NSObject< CoordinatorExport >
@property(nonatomic,copy)BOOL (^openShareCallBack)(NSDictionary * opinion);
@end上面的做法就是我们会在合适的实际向JavaScript的运行的环境中注入一个叫做mobileCoordinator的对象，这个对象会注入到JavaScript环境中的window对象上，全局可用。为什么要封装到一个对象上，是因为js没有命名空间的概念并且有变量提升向上查找，会引起命名冲突，所以我们把对外暴露的方法都进行一个对象封装。还有一个好处就是JavaScript的开发者与app的开发者都会像编写各自语言的代码一样书写代码，没有语法损失，js同步调用原生方法，原生实现的时候具备返回值，js的调用者就可以获取返回值，如果是异步回调，那可以对外暴露方法的时候提供一个callback的入参，在异步完成后进行回调。
4、其他方案例如JavaScriptBridge等与第二种方案类似。
方案比较：
方案1的流程如下：交互方式为单向
H5调用Native:
H5页面 —>发起Url Redirect(Url上携带带有动作语义的参数)->Native App->拦截Url Redirect->解析动作语义参数->调用相关Native代码
Native调用H5页面:
Native App—>获取页面上预留参数和解析动作语义参数->调用相关JavaScript代码
这样使得一个简单的方法调用变得非常割裂，而且双端维护成本非常高，不易debug。
方案2的流程如下：
交互为双向：
H5页面(Native App)<->调用Native代码(调用JavaScript代码)<->Native App执行被调用Native代码返回调用结果(H5页面执行被调用JavaScript代码并返回调用结果)
方案2优势比较明显，一般会采用第二种。
实现细节
细节上有一些需要注意的东西：1.oc方法是带有参数标签的，js的方法并没有，注意使用JSExportAs这个宏来将oc原生语言转换为js语法风格的代码。
2.注意获取jscontext上下文并注入方法与对象的时机，这取决于H5页面上的js引用时机，如果H5页面上使用require来进行顺序引用，就不会出现问题，如果与原生交互的js的代码加载与原生注入的注入顺序混乱，则调用不到原生暴露的方法会引起js执行异常。建议结合拦截url的方式让H5决定何时注入，或者是前端工程师梳理规范，在H5引用js的时候做顺序控制。
防止注入与钓鱼
其实这个不太算是技术方案，不过可以提一下。有时候手机在危险的网络环境中比方说链接在不安全的路由器中，DNS进行恶意中转到钓鱼网站上，如果页面调用已知的原生暴露出来的方法，同步数据或者是调用关键业务，就会有注入攻击的风险。一般需要做的是，H5在调用app原生关键业务的时候，需要在调用原生方法的时候传入票据，原生通过服务端的认证中心验证票据，通过才可以处理页面调用请求，在同步数据与状态的时候，比方说将app中的用户登录状态同步到H5页面上，一般app会同步cookie，不过这种方式维护成本较高。对于同步状态与数据，app应该使用业务票据来传递给H5，H5通过票据中心置换出真正的用户状态或者是关键业务数据。更高级别的方案还有H5与App临时握手等。H5在WebView中的Debug
这个是一个比较恶心的事情，不过我们可以替换js的window对象上的console对象，将log函数转接到原生，再通过一些其他方式进行输出，JavaScriptCore中提供了exceptionHandlercontext.exceptionHandler = ^(JSContext *context, JSValue *exception) { NSLog(@"JS Error: %@", exception);};
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript调用App原生代码(iOS、Android)通用解决方案 实际场景 场景：现在有一个H5活动页面，上面有一个登陆按钮，要求点击登陆按钮以后，唤出App内部的登录界面，当登录成功
- IOS 开发 OC（Object_C）与前端页面JS（JavaScript）交互整理（一）
- 原生APP中js怎样与Android和ios进行交互
- iOS原生App与H5页面交互笔记
- iOS开发 - Swift使用JavaScriptCore与JS交互
- iOS开发 - Swift使用JavaScriptCore与JS交互
- iOS 开发 Object-C和JavaScript交互详解之OC与JS交互在WKWebView中使用
- iOS原生App与H5页面交互笔记
- OVGap iOS与Javascript交互(H5与原生APP交互)
- 原生APP中js怎样与Android和ios进行交互
- iOS开发:JavaScriptCore.framework的简单使用--JS与OC的交互篇
- iOS中原生APP与JS交互 之 WebViewJavascriptBridge 的简单用法
- 使用WebViewJavascriptBridge进行iOS与H5交互
- IOS内嵌H5页面实现（JS实现图片正常显示，并正确返回文档的高度）
- iOS原生App与H5页面交互笔记
- iOS原生App与H5页面交互笔记
- iOS原生App与H5页面交互 离线缓存 笔记
- iOS开发之解决APP界面卡死Bug，一级页面进行系统右滑返回，导致整个app卡死
- 使用OSS JavaScript的sdk进行web端直传，开发环境下测试没有问题，但部署到服务器上或者打包到IOS原生包中出现了问题。
- 【iOS开发】H5与Native交互之JSBridge技术