H5与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;

 .查询标签

      // 查询标签

      NSString *str = @"var word = document.getElementById('word');"

                             @"alert(word.innerHTML)";

      [webView stringByEvaluatingJavaScriptFromString:str];

   .为网页添加标签：

      NSString *str = @"var img = document.createElement('img');"

                      "img.src = 'icon5.jpg';"

                      "img.width = 300;"

                      "img.heigth = 100;"

                      "document.body.appendChild(img);";

     [webView stringByEvaluatingJavaScriptFromString:str];

   .删除网页标签：

      // 删除标签

      NSString *str1 = @"var word = document.getElementById('word');"

                                @"word.remove();";

      [webView stringByEvaluatingJavaScriptFromString:str1];

   .更改标签：

      // 更改

      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"></p>

            <ul>

                 <li class="change"></li>

                 <li class="haha"></li>

                 <li></li>

                 <li></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中提供了exceptionHandler

context.exceptionHandler = ^(JSContext *context, JSValue *exception) { NSLog(@"JS Error: %@", exception);};

iOS与H5交互的更多相关文章

iOS与H5交互遇到的坑
之前的博客写过使用<JavaScriptCore/JavaScriptCore.h>库来实现与H5的交互,但是在项目中还是遇到了一些不得不踩的坑.在这里将我遇到的问题以及参考网上几位大神的 ...
WebViewJavascriptBridge详细使用 iOS与H5交互的方案
WebViewJavascriptBridge详细使用源网址: https://www.cnblogs.com/jiang-xiao-yan/p/5345755.html 前言 WebView ...
iOS与H5交互及UIWebView缓存
iOS原生App与H5页面交互笔记最近在做一个项目用到了原生App与H5交互,之前有做过简单的H5页面直接调用原生方法的例子,就是利用UIWebView中的代理方法 //webview每次加载之前都 ...
IOS与h5交互记录
博主之前做过移动端app嵌入网页,与Android和IOS有交互,一直没有时间分享过程.这里不多说Android交互啦-很简单,详细了解IOS与h5的交互吧. IOS不同语法和h5的交互所建立的JSB ...
iOS与H5交互（WKWbebView）
前言: 在iOS开发中,或多或少的会嵌入一些H5页面,有时候需要原生代码和H5页面进行交互.iOS8开始苹果推出性能更强大的WKWebView,所以一下方法是关于WKWebView与JS的交互. 创建 ...
浅谈 iOS 与 H5 的交互- JavaScriptCore 框架
前言小的作为一个iOS程序猿,可能研究JavaScript以及H5相关的知识并不是为了真正的要去转行做这一方面,其实更多的为了要研究OC中的JavaScriptCore框架,JavaScriptCo ...
iOS原生APP和H5交互-delegate和第三方
一.原生代码中直接加载页面(拦截) 1. 具体案例加载本地/网络HTML5作为功能介绍页 2. 代码示例 //本地 -(void)loadLocalPage:(UIWebView*)we ...
iOS JavaScriptCore与H5交互时出现异常提示
在利用JavaScriptCore与H5交互时出现异常提示: This application is modifying the autolayout engine from a background ...
Native与H5交互的一些解决方法
一. 原生代码中直接加载页面 1. 具体案例加载本地/网络HTML5作为功能介绍页 2. 代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webVi ...

随机推荐

【Spark】SparkStreaming-加载外部配置文件
SparkStreaming-加载外部配置文件 spark加载配置文件_百度搜索 Spark加载外部配置文件 - CSDN博客 spark读取配置文件中的配置 - CSDN博客 spark加载prop ...
转: xshell远程连接自动断开的问题解决办法
转:http://blog.csdn.net/haijiaoqihao20160106/article/details/50623431 2.客户端的配置 Keep Alive修改.我的xshell的 ...
ubuntu14.04-64位机配置android开发环境，ADT，sdk，eclipsea
这是一篇没有图的好文章,对于学习android的非常实用 1.首先到orcale官网 http://www.oracle.com/technetwork/java/javase/download ...
Chromium网页Layer Tree创建过程分析
在Chromium中.WebKit会创建一个Graphics Layer Tree描写叙述网页.Graphics Layer Tree是和网页渲染相关的一个Tree. 网页渲染终于由Chromium的 ...
Mac关闭摄像头
为了防止黑客入侵,我们可以手动执行命令,关掉摄像头设备的访问权限,让黑客去看黑夜吧. Mac关闭禁用摄像头的方法,打开终端,拷贝如下代码,回车,输入管理员密码,再次拷贝,回车. sudo chmod ...
ASP入门（二十三）- 数据库插入、更新和删除操作
我们这里介绍如何使用 Recordset 对象进行插入.更新和删除操作,顺便和 SQL 语句对比. 插入记录 AddNew 方法用于插入一条记录,首先打开一个记录集,并且这个记录具备可写特性,而后调用 ...
Python爬虫实战（二）：爬百度贴吧
代码: # _*_ coding:utf-8 _*_ import urllib import urllib2 import re class Tool: removingImg = re.compi ...
被查封7周之后，全球最大BT网站“海盗湾”又重新活过来了【36kr】
原文地址原文地址 "免费"和"版权","自由"和"监管"永远在较量啊,矛盾共同体,事物的两面性~ 被查封7周之后,全球 ...
IOCCC（The International Obfuscated C Code Contest）
国际 C 语言混乱代码大赛(IOCCC, The International Obfuscated C Code Contest)是一项国际编程赛事,从 1984 年开始,每年举办一次(1997年.1 ...
Spring学习笔记五：Spring进行事务管理
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6776256.html 事务管理主要负责对持久化方法进行统一的提交或回滚,Spring进行事务管理即我们无需在 ...

iOS与H5交互