IOS 原生与HTML交互

跟原生开发相比，H5的开发相对来一个成熟的框架和团队来讲在开发速度和开发效率上有着比原生很大的优势，至少不用等待审核。那么问题来了，H5与本地原生代码势必要有交互的，比如本地上传一些信息，H5打开本地的页面，打开本地进行微信等第三方分享等，今天就简单讲一下iOS中本地UIWebView,WKWebView与H5的交互。

DEMO地址：点击下载

UIWebView的交互

stringByEvaluatingJavaScriptFromString的使用

UIWebView在2.0时代就有的类，一直到现在（目前9.x）都可以使用的WEB容器，它的方法很简单，在iOS7.0之前JS交互的方法只有一个stringByEvaluatingJavaScriptFromString:

- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

使用stringByEvaluatingJavaScriptFromString方法，需要等UIWebView中的页面加载完成之后去调用.

以下是简单的使用场景：

1、获取当前页面的url。

- (void)webViewDidFinishLoad:(UIWebView *)webView {      
    NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];  
} 

2、获取页面title：

- (void)webViewDidFinishLoad:(UIWebView *)webView {       
        NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];     
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];  
} 

3、修改界面元素的值。

NSString *js_result = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByName(‘q‘)[0].value=‘iOS‘;"]; 

4、表单提交：

NSString *js_result2 = [webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit(); "]; 

这样就实现了在google搜索关键字：“iOS”的功能。

5、插入js代码

上面的功能我们可以封装到一个js函数中，将这个函数插入到页面上执行，代码如下：

    "script.type = ‘text/javascript‘;"            
    "script.text = \"function myFunction() { "            
    "var field = document.getElementsByName(‘q‘)[0];"             
    "field.value=‘iOS‘;"            
    "document.forms[0].submit();"   
    "}\";"     
    "document.getElementsByTagName(‘head‘)[0].appendChild(script);"];    

    [webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];   

看上面的代码：

a、首先通过js创建一个script的标签，type为‘text/javascript‘。

b、然后在这个标签中插入一段字符串，这段字符串就是一个函数：myFunction，这个函数实现google自动搜索关键字的功能。

c、然后使用stringByEvaluatingJavaScriptFromString执行myFunction函数。

6、直接调用JS函数

上面的函数调用是本地注入到H5中，然后本地调用的，那么如果H5中就有原生的JS函数:myFunction();，那么我们就可以直接执行:

[webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];  

JavaScriptCore框架的使用

我们会发现stringByEvaluatingJavaScriptFromString的方法调用太笨拙,在iOS7.0中苹果公司增加了JS利器JavaScriptCore框架,框架让Objective-C和JavaScript代码直接的交互变得更加的简单方便。该框架其实只是基于webkit中以C/C++实现的JavaScriptCore的一个包装。其本身是可以单独作为一个开发库来使用，框架中有完整的数据计算逻辑，今天只讲H5与本地交互，所以不作涉及，有兴趣可以参考:iOS7新JavaScriptCore框架入门介绍。

JavaScriptCore提供了很多灵活的本地OC与JS的交互方式，通过JSContext和JSValue来完成的，JSContext是一个WebView中js代码运行环境，所有的JS交互都要通过-
(JSValue *)evaluateScript:(NSString *)script;方法就可以执行一段JavaScript脚本。

JSValue则可以说是JavaScript和Object-C之间互换的桥梁，它提供了多种方法可以方便地把JavaScript数据类型转换成Objective-C.

具体如何交互我们先来看一段H5代码:

<!DOCTYPE html>
<html>
    <head>
        <title>测试iOS与JS之前的互调</title>
        <style type="text/css">
            * {
                font-size: 40px;
            }
        </style>
        <script type="text/javascript">
            function showAppAlertMsg(message){
                alert(message);
            }
        </script>
    </head>
    <body>
        <div style="margin-top: 100px">
            <h1>Test how to use objective-c call js</h1>
            <input type="button" value="Call ObjC system camera" onclick="callSystemCamera()">
                <input type="button" value="Call ObjC system alert" onclick="showAlertMsg(‘js title‘, ‘js message‘)">
        </div>

        <div>
            <input type="button" value="Call ObjC func with JSON " onclick="callWithDict({‘name‘: ‘testname‘, ‘age‘: 10, ‘height‘: 170})">
                <input type="button" value="Call ObjC func with JSON and ObjC call js func to pass args." onclick="jsCallObjcAndObjcCallJsWithDict({‘name‘: ‘testname‘, ‘age‘: 10, ‘height‘: 170})">
        </div>

        <div>
            <span id="jsParamFuncSpan" style="color: red; font-size: 50px;"></span>
        </div>
    </body>
</html>

我们可以看出其中H5实现的JS代码如下:

<script type="text/javascript">
    function showAppAlertMsg(message){
        alert(message);
    }
</script>

函数showAppAlertMsg是H5实现可以由我们本地主动调用的。那么相对应的H5主动调用的方法是:

<input type="button" value="Call ObjC system camera" onclick="callSystemCamera()">

其中callSystemCamera()是H5调用的函数，我们可以看到在HTML代码中是找不到这个函数的实现的，因为这个函数是需要我们本地去实现。

接下来我们就讲一下我们本地如何调用由H5实现的函数showAppAlertMsg,本地如何实现能够右H5端调用的方法:

1.在页面加载完成之后获取JS运行环境JSContext

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *jsContext = [webView     valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
}

2.利用evaluateScript声明函数并传递参数执行代码

    JSValue *jsValue = [jsContext evaluateScript:@"showAppAlertMsg"];
    [jsValue callWithArguments:@[@"这是app本地交互文案"]];

第一行代码是声明一个函数showAppAlertMsg，第二行是传递参数并执行代码callWithArguments.

以上是主动调用H5实现的函数，也可以称之为传递数据给H5。

本地实现能够让H5调用的函数:

    // 也可以通过下标的方式获取到方法
    self.jsContext[@"callSystemCamera"] = ^(){
        NSLog(@"callSystemCamera");

    };

    self.jsContext[@"showAlertMsg"] = ^(NSString *title, NSString *message){
        NSLog(@"callSystemCamera");

    };

    self.jsContext[@"callWithDict"] = ^(id jsonDic){
        NSLog(@"callWithDict%@",jsonDic);

    };

一目了然，通过Block传递参数和方法。

上面是利用JavaScriptCore的最基本的方法实现JS调用，还有另外一种方案利用JSExport协议进行交互.其实可以理解为通过JSExport协议实现一种把本地的实例绑定为H5中的一个对象，通过这个对象调用本地实例方法的一种交互设计。

该设计在H5端与上面的是不一样的：

   <input type="button" value="Call ObjC system camera" onclick="OCModel.callSystemCamera()">
   <input type="button" value="Call ObjC system alert" onclick="OCModel.showAlertMsg(‘js title‘, ‘js message‘)">

我们会发现 与之前的H5代码相比 多了一个 OCModel,这个在JS中可以理解为一个对象，点击按钮之后调用对象OCModel中的函数OCModel.callSystemCamera,那么该对象如何由本地绑定呢。

1.首先声明一个JSExport协议,该协议需要声明刚才H5中的函数:

#import <JavaScriptCore/JavaScriptCore.h>

@protocol JavaScriptObjectiveCDelegate <JSExport>

// JS调用此方法来调用OC的系统相册方法
- (void)callSystemCamera;
// 在JS中调用时，函数名应该为showAlertMsg(arg1, arg2)
// 这里是只两个参数的。
- (void)showAlert:(NSString *)title msg:(NSString *)msg;
// 通过JSON传过来
- (void)callWithDict:(NSDictionary *)params;
// JS调用Oc，然后在OC中通过调用JS方法来传值给JS。
- (void)jsCallObjcAndObjcCallJsWithDict:(NSDictionary *)params;

@end

2.新建一个类，该类实现上面的协议

@interface NLJsObjCModel : NSObject <JavaScriptObjectiveCDelegate>
@property (nonatomic, weak) JSContext *jsContext;
@property (nonatomic, weak) UIWebView *webView;
@end

实现文件:

#import "NLJsObjCModel.h"

@implementation NLJsObjCModel

- (void)callWithDict:(NSDictionary *)params {
    NSLog(@"Js调用了OC的方法，参数为：%@", params);
}

// Js调用了callSystemCamera
- (void)callSystemCamera {
    NSLog(@"JS调用了OC的方法，调起系统相册");

    // JS调用后OC后，又通过OC调用JS，但是这个是没有传参数的
    JSValue *jsFunc = self.jsContext[@"jsFunc"];
    [jsFunc callWithArguments:nil];
}

- (void)jsCallObjcAndObjcCallJsWithDict:(NSDictionary *)params {
    NSLog(@"jsCallObjcAndObjcCallJsWithDict was called, params is %@", params);

    // 调用JS的方法
    JSValue *jsParamFunc = self.jsContext[@"jsParamFunc"];
    [jsParamFunc callWithArguments:@[@{@"age": @10, @"name": @"lili", @"height": @158}]];
}

- (void)showAlert:(NSString *)title msg:(NSString *)msg {
    dispatch_async(dispatch_get_main_queue(), ^{
        UIAlertView *a = [[UIAlertView alloc] initWithTitle:title message:msg delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];
        [a show];
    });
}
@end

3.将NLJsObjCModel实例对象绑定到JS中:

#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    // 通过模型调用方法，这种方式更好些。
    NLJsObjCModel *model  = [[NLJsObjCModel alloc] init];
    self.jsContext[@"OCModel"] = model;
    model.jsContext = self.jsContext;
    model.webView = self.webView;

    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"异常信息：%@", exceptionValue);
    };
}

到此结束，H5按钮点击之后就可以通过JSExport协议传递跟本地对象，本地对象就能收到相应。

WKWebView的交互使用

iOS8以后，苹果推出了新框架Wekkit，提供了替换UIWebView的组件WKWebView。

先看下 WKWebView的特性：

1. 在性能、稳定性、功能方面有很大提升（最直观的体现就是加载网页是占用的内存，模拟器加载百度与开源中国网站时，WKWebView占用23M，而UIWebView占用85M）；

2. 允许JavaScript的Nitro库加载并使用（UIWebView中限制）；

3. 支持了更多的HTML5特性；

4. 高达60fps的滚动刷新率以及内置手势；

5. 将UIWebViewDelegate与UIWebView重构成了14类与3个协议（查看苹果官方文档）；

WKWebView 的使用呢与UIWebView相同，不同的是回调和代理方法.这里简单介绍一下.

## WKNavigationDelegate
// 页面开始加载时调用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;
// 当内容开始返回时调用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;
// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;
// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;

页面跳转的代理方法：

// 接收到服务器跳转请求之后调用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;
// 在收到响应后，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
// 在发送请求之前，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

新的 WKUIDelegate协议

这个协议主要用于WKWebView处理web界面的三种提示框(警告框、确认框、输入框)，下面是警告框的例子:

/**
 *  web界面中有弹出警告框时调用
 *
 *  @param webView           实现该代理的webview
 *  @param message           警告框中的内容
 *  @param frame             主窗口
 *  @param completionHandler 警告框消失调用
 */
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(void (^)())completionHandler;

动态加载并运行JS代码(WKUserScript)

用于在客户端内部加入JS代码，并执行，示例如下

// 图片缩放的js代码
NSString *js = @"var count = document.images.length;for (var i = 0; i < count; i++) {var image = document.images[i];image.style.width=320;};window.alert(‘找到‘ + count + ‘张图‘);";
// 根据JS字符串初始化WKUserScript对象
WKUserScript *script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
// 根据生成的WKUserScript对象，初始化WKWebViewConfiguration
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
[config.userContentController addUserScript:script];
_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
[_webView loadHTMLString:@"<head></head><imgea src=‘http://www.nsu.edu.cn/v/2014v3/img/background/3.jpg‘ />"baseURL:nil];
[self.view addSubview:_webView];

五、webView 执行JS代码

用户调用用JS写过的代码，一般指服务端开发的：

//javaScriptString是JS方法名，completionHandler是异步回调block
[self.webView evaluateJavaScript:javaScriptString completionHandler:completionHandler];

六、JS调用App注册过的方法

在WKWebView里面注册供JS调用的方法，是通过WKUserContentController类下面的方法：

- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;

scriptMessageHandler是代理回调，JS调用name方法后，OC会调用scriptMessageHandler指定的对象。

JS在调用OC注册方法的时候要用下面的方式：

window.webkit.messageHandlers.<name>.postMessage(<messageBody>)

注意，name(方法名)是放在中间的，在这里个人理解该name可以理解为一个标识，该标识将OC本地的实例对象绑定到JS中，将messageBody只能是一个对象，如果要传多个值，需要封装成数组，或者字典。整个示例如下：

//OC注册供JS调用的方法
[[_webView configuration].userContentController addScriptMessageHandler:self name:@"app"];

//OC在JS调用方法做的处理
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
    NSLog(@"JS 调用了 %@ 方法，传回参数 %@",message.name,message.body);
}

//JS调用
    window.webkit.messageHandlers.app.postMessage(null);

最后：

简单做一个总结,在iOS7以前我们只能使用UIWebView,所以在js交互中只能通过stringByEvaluatingJavaScriptFromString进行本地调用H5，而H5端调用本地多采用URLSchemes方式（解耦---Hybrid
H5跨平台性思考），

iOS7之后使用UIWebView则可以使用JavaScriptCore框架，通过JSContext进行JS交互。

iOS8之后可以使用WKWebView本身的框架，毕竟WKWebView本身已经优化很多，并且提供了更多的方法和协议，不过注意一点的是在WKWebView中鉴于一些线程和进程的问题是无法获取JSContext的。

时间： 2024-10-29 03:07:02

IOS 原生与HTML交互的相关文章

iOS原生与H5交互WKWebView

一.原生与H5页面交互方式 登陆后将token放入wkwebview的cookie中.以后wkwebview也可以同步原生app的登陆状态了. 以下代码   @"document.cookie = 'UID=%@';document.cookie = 'CLIENT=App';document.cookie = 'TOKEN=%@'" 根据自己项目的cookie格式传递. 1 NSString *js = @"function clearCache(){localStorag

iOS原生与H5交互

一.WKWebView WKWebView 初始化时,有一个参数叫configuration,它是WKWebViewConfiguration类型的参数,而WKWebViewConfiguration有一个属性叫userContentController,它又是WKUserContentController类型的参数. WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init]; config.preference

安卓原生与hml交互（WebView基础）

WebView加载页面 webView有两种加载方式, 加载网络地址 webView.loadUrl("www.xxx.com/index.html"); 加载本地资源 webView.loadUrl("file:///android_asset/example.html"); 添加请求头信息,在这里可以加入认证信息等等 Map<String,String> map=new HashMap<String,String>(); map.put(

原生与jqueryDOM

总结与复习原生与jquery的DOM操作. 获取元素节点: $(".class") $("#id") $(".class div") $(".class div:first") document.querySelector('.class'); document.querySelector('#id'); document.querySelector('.xxx div'); document.querySelector('.

JavaScript:浅谈iOS与H5的交互-JavaScriptCore框架

JavaScript:浅谈iOS与H5的交互-JavaScriptCore框架 前言 小的作为一个iOS程序猿,可能研究JavaScript以及H5相关的知识并不是为了真正的要去转行做这一方面,其实更多的为了要研究OC中的JavaScriptCore框架,JavaScriptCore框架主要是用来实现iOS与H5的交互.当然了,最早我曾经写过iOS浅谈webView的JS一种用法.(去掉web显示页的广告),这种算得上最简单的iOS与H5的交互了.现在混合编程越来越多,H5的相对讲多,所以研究J

ios cordova 原生与js通讯原理

在ios中,cordova的CDVViewController继承了viewController,每一个h5的页面,都对应一个CDVVIewController, 里面都有一个webview,是ios中专门显示h5页面的view. h5和原生端的交互,主要是通过插件的形式实现,原生这边写一个类继承CDVPlugin,然后实现方法,js那边封装好每个接口的方法, 最终通过调用cordova.js里的exec,传入服务类名,方法名,以及回调函数及参数等进行调用. 它的通讯原理是:有两种方法 1.通过

Native App开发 与Web App开发（原生与web开发优缺点）

Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素.数据内容.逻辑框架均安装在手机终端上. Web App开发 Web App开发即是一种框架型APP开发模式(HTML5  APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份

iOS和unity的交互问题

之前完全没接触过unity,因为现在公司需要在unity的代码上做二次开发,所以我要能够随意调用unity的方法,在网上搜了很多种方法都没什么用,全是几年前的版本,我只是在别人原来的方法上更新下,写一个最新版本的交互例子.   我用的是unity5.3和Xcode7.3 创建一个按钮直接跳转到unity项目的方法网上可以搜到,我就不做描述了 这里只说怎样随意调用unity里单个的方法 创建unity场景这个可以通过 雨松momo大神的方法来弄 http://www.xuanyusong.com/

iOS开发 UIWebView+JavaScript 交互总结

算是个人项目经验的,印象比较深的Web+JS交互的使用 iOS原生应用与Web页面元素交互方式有很多,JavaScriptCore.拦截协议.第三方框架WebViewJavaScriptBridge.iOS8之后的WKWebView等: 简要记录下之前开发用到的两种方式: 1. 劫持页面加载,从 UIWebVIew 的 shouldStartLoadWithRequest 方法中拦截RequestURL 判断加载项,代码简要: -(BOOL)webView:(UIWebView *)webVie