iOS中的UIWebView与WKWebView，JavaScript的与OC交互，饼干管理看我就够（上）

前言

iOS的开发中，用来显示一个HTML页，H5页，经常会用的一个控件是的WebView。说到的WebView，你知道多少呢？是简单的展示，还是要和OC交互实现比较复杂的功能呢？本文将为您介绍的iOS中的WebView中，并且由浅到深，一步步带你了解并掌握的WebView的用法，JavaScript的与目标的交互，以及饼干的管理，JS的调试等。

文章因涉及到的内容较多，因此拆分成以下几部分：

的iOS中的UIWebView与WKWebView，JavaScript的与OC交互，饼干管理看我就够（上）

iOS中UIWebView与WKWebView，JavaScript与OC交互，Cookie管理看我就够（中）（已发布😊）

iOS中UIWebView与WKWebView，JavaScript与OC交互，Cookie管理看我就够（下）（已发布😊）

关于文中提到的一些内容，这里我准备了个Demo，有需要的小伙可以下载。

本文目录

前言

UIWebView的

UIWebView的基本用法

一个UIWebView中的JavaScript与目标的交互

UIWebView OC调用JS

stringByEvaluatingJavaScriptFromString：

JavaScriptCore（iOS 7.0 +）

UIWebView JS调用OC

自定义网址方案（受保护网址）

JavaScriptCore（iOS 7.0 +）

UIWebView中的Cookie的管理

饼干简介

曲奇管理

未完待续

UIWebView的

UIWebView的基本用法

首先要介绍的就是我们的老朋友UIWebView。相信对大多数小伙伴儿而言，UIWebView状语从句：UILabel一样，都是最早接触的控件了，其实UIWebView用法英语谚语比较简单（功能基本能满足需求），简单的创建，并且调用

- (void)loadRequest:(NSURLRequest*)request;- (void)loadHTMLString:(NSString*)string baseURL:(nullableNSURL*)baseURL;- (void)loadData:(NSData*)data MIMEType:(NSString*)MIMEType textEncodingName:(NSString*)textEncodingName baseURL:(NSURL*)baseURL;

这些方法，加载就可以了。

当然，如果需要监听页面加载的结果，或者需要判断是否允许打开某个URL，需要那设置UIWebView的delegate，只代理需要遵循协议，并且在代理中实现下面的这些可选方法就可以：

__TVOS_PROHIBITED@protocolUIWebViewDelegate@optional- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType;- (void)webViewDidStartLoad:(UIWebView*)webView;- (void)webViewDidFinishLoad:(UIWebView*)webView;- (void)webView:(UIWebView*)webView didFailLoadWithError:(nullableNSError*)error;@end

一个UIWebView中的JavaScript与目标的交互

这里不详细讨论一些很好的第三方实现，比如WebViewJavascriptBridge，单纯的讲讲native端JS与OC的交互实现方式，读完了下面的部分，相信你也会实现一个简单的bridge了。

UIWebView OC调用JS

1. stringByEvaluatingJavaScriptFromString：

最常用的方法，很简单，调用只要- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;就可以了，如：

self.navigationItem.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];

虽然比较方便，但是缺点也有：

该方法不能判断调用了一个JS方法之后，是否发生了错误。当错误发生时，返回值为零，而当调用一个方法本身没有返回值时，返回值也为零，所以无法判断是否调用成功了。

返回值类型为nullable NSString *，就意味着当调用的JS方法有返回值时，都以字符串返回，不够灵活。当返回值是一个JS的阵列时，还需要解析字符串，比较麻烦。

对于上述缺点，可以通过使用JavaScriptCore（iOS 7.0 +）来解决。

2. JavaScriptCore（iOS 7.0 +）

想必大家不会陌生吧，弄前些日子的沸沸扬扬的JSPatch被禁事件中，最核心的就是它了。因为JavaScriptCore的JS到OC的映射，可以替换各种JS方法成OC方法，其所以动态性（配合运行时的不安全性）也就成为了JSPatch被苹果禁掉的最主要原因。讲这里下UIWebView通过JavaScriptCore来实现OC-> JS。

其实WebKit的都有一个内嵌的JS环境，一般我们在页面加载完成之后，获取JS上下文，通过然后JSContext的evaluateScript:方法来获取报道查看值。该因为得到方法的的英文一个JSValue对象，所以支持的JavaScript的数组，数字，字符串，对象等数据类型。

- (void)webViewDidFinishLoad:(UIWebView*)webView{//更新标题，这是上面的讲过的方法//self.navigationItem.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];//获取该UIWebView的javascript上下文JSContext *jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];//这也是一种获取标题的方法。JSValue *value = [self.jsContext evaluateScript:@"document.title"];//更新标题self.navigationItem.title = value.toString;}

方法该解决了stringByEvaluatingJavaScriptFromString:报道查看值只是NSString的问题。

那么如果我执行了一个不存在的方法，比如

[self.jsContext evaluateScript:@"document.titlexxxx"];

那么必然会报错，报错了，可以通过@property (copy) void(^exceptionHandler)(JSContext *context, JSValue *exception);，设置该块来获取异常。

//在调用前，设置异常回调[self.jsContext setExceptionHandler:^(JSContext *context, JSValue *exception){NSLog(@"%@",exception);}];//执行方法JSValue *value = [self.jsContext evaluateScript:@"document.titlexxxx"];

该方法，很好也。解决的了stringByEvaluatingJavaScriptFromString:调用JS方法后，出现错误却捕获不到的缺点。

UIWebView JS调用OC

1.自定义URL方案（被拦截的URL）

比如darkangel://。方法是在html或者js中，点击某个按钮触发事件时，跳转到自定义URL Scheme构造的链接，而Objective-C中捕获该链接，从中解析必要的参数，实现JS到OC的一次交互比如页面中一个一个标签，链接如下：

短信验证登录

而在目标C中，遵循只要了UIWebViewDelegate协议，那么每次打开一个链接之前，都会触发方法

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType；

在该方法中，捕获该链接，并且返回NO（阻止本次跳转），从而执行对应的OC方法。

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType{//标准的URL包含scheme、host、port、path、query、fragment等NSURL*URL = request.URL;if([URL.scheme isEqualToString:@"darkangel"]) {if([URL.host isEqualToString:@"smsLogin"]) {NSLog(@"短信验证码登录，参数为 %@", URL.query);returnNO;}}returnYES;}

当用户点击短信验证登录时，控制台会输出短信验证码登录，参数为 username=12323123&code=892845。参数可以是一个json格式并且URLEncode过的字符串，这样就可以实现复杂参数的传递（比如WebViewJavascriptBridge）。

优点：泛用性强，可以配合H5实现页面动态化比如页面中一个活动链接到活动详情页，当本地尚未开发完毕时，链接可以是一个H5链接，等到本地开发完毕时，可以通过该方法跳转到本地页面，实现页面动态化。且该方案适用于安卓和iOS版，泛用性很强。

缺点：无法直接获取本次交互的返回值，比较适合单向传参，且不关心回调的情景，比如H5页面跳转到本地页面等。

其实，WebViewJavascriptBridge使用的方案就是拦截URL，为了解决无法直接获取返回值的缺点，它采用了将一个名为callback的function作为参数，通过一些封装，传递到OC（js-> oc传递参数和callbackId），然后在OC端执行完毕，再通过block来回调回调（oc- > js，传递返回值参数），实现异步获取返回值，比如在js端调用

//JS调用OC的分享方法（当然需要OC提前注册）share为方法名，shareData为参数，后面的为回调functionWebViewJavascriptBridge.callHandler('share', shareData,function(response){//OC端通过block回调分享成功或者失败的结果alert(response);});

具体的可以看下它的源码，还是很值得学习的。

2. JavaScriptCore（iOS 7.0 +）

除了拦截网址的方法，还可以利用上面提到的JavaScriptCore，它十分强大，强大在哪里呢？下面我们来一探究竟。

当然，还是需要在页面加载完成时，先获取JS上下文。获取到之后，我们就可以进行强大的方法映射了。

比如JS中我定义了一个分享的方法

functionshare(title, imgUrl, link){//这里需要OC实现}

在OC中实现如下

- (void)webViewDidFinishLoad:(UIWebView*)webView{//将js的function映射到OC的方法[selfconvertJSFunctionsToOCMethods];}- (void)convertJSFunctionsToOCMethods{//获取该UIWebview的javascript上下文//self持有jsContext//@property (nonatomic, strong) JSContext *jsContext;self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];//js调用oc//其中share就是js的方法名称，赋给是一个block 里面是oc代码//此方法最终将打印出所有接收到的参数，js参数是不固定的self.jsContext[@"share"] = ^() {NSArray*args = [JSContext currentArguments];//获取到share里的所有参数//args中的元素是JSValue，需要转成OC的对象NSMutableArray*messages = [NSMutableArrayarray];for(JSValue *objinargs) {[messages addObject:[obj toObject]];}NSLog(@"点击分享js传回的参数：\n%@", messages);};}

在HTML或者JS的某处，点击一个标签调用这个共享方法，并传参，如

分享活动，领30元红包

此时，如果用户点击了分享活动，领30元红包这个标签，那么在控制台会打印出所有参数

上面的代码实现了OC方法替换JS实现。它十分灵活，主要依赖这些API。

@interfaceJSContext(SubscriptSupport)/*!

@method

@abstract Get a particular property on the global object.

@result The JSValue for the global object's property.

*/- (JSValue *)objectForKeyedSubscript:(id)key;/*!

@method

@abstract Set a particular property on the global object.

*/- (void)setObject:(id)object forKeyedSubscript:(NSObject *)key;

self.jsContext[@"yourMethodName"] = your block;写这样不仅可以在有yourMethodName方法时替换该JS方法为OC实现，还会在该方法没有时，添加方法。简而言之，有则替换，无则添加。

那如果我想写一个有两个参数，一个返回值的JS方法，OC应该怎么替换呢？

JS中

//该方法传入两个整数，求和，并返回结果functiontestAddMethod(a, b){//需要OC实现a+b，并返回returna + b;}//js调用console.log(testAddMethod(1,5));//output  6

OC直接替换该方法

self.jsContext[@"testAddMethod"] = ^NSInteger(NSIntegera,NSIntegerb) {returna + b;};

那么当在JS调用

//js调用console.log(testAddMethod(1,5));//output  6， 方法为 a + b

如果OC替换该方法为两数相乘

self.jsContext[@"testAddMethod"] = ^NSInteger(NSIntegera,NSIntegerb) {returna * b;};

再次调用JS

console.log(testAddMethod(1,5));//output  5，该方法变为了 a * b。

举一反三，调用方法原实现，并且在原结果上乘以10。

//调用方法的本来实现，给原结果乘以10JSValue *value =self.jsContext[@"testAddMethod"];self.jsContext[@"testAddMethod"] = ^NSInteger(NSIntegera,NSIntegerb) {JSValue *resultValue = [value callWithArguments:[JSContext currentArguments]];returnresultValue.toInt32 *10;};

再次调用JS

console.log(testAddMethod(1,5));//output  60，该方法变为了(a + b) * 10

上面的方法，都是同步函数，如果我想实现JS调用OC的方法，并且异步接收回调，那么该怎么做呢？比如H5中有一个分享按钮，用户点击之后，调用本地分享（微信分享，微博分享等），在天然分享成功或者失败时，回调H5页面，告诉其分享结果，H5页面刷新对应的UI，显示分享成功或者失败。

这个问题，需要对JS有一定了解。下面上的js代码。

//声明functionshare(shareData){vartitle = shareData.title;varimgUrl = shareData.imgUrl;varlink = shareData.link;varresult = shareData.result;//do something//这里模拟异步操作setTimeout(function(){//2s之后，回调true分享成功result(true);},2000);}//调用的时候需要这么写share({title:"title",imgUrl:"http://img.dd.com/xxx.png",link: location.href,result:function(res){//函数作为参数console.log(res ?"success":"failure");}});

从封装的角度上讲，JS的share方法的参数的英文一个对象，该对象包含了几个必要的字段，以及一个回调函数，这个回调函数有点像OC的block，调用者把一个function传入一个function当作参数，在适当时候，内方法实现者调用该function，对实现调用者的异步回调那么如果此时OC来实现。share方法，该怎么做呢其实大概是这样的？

//异步回调self.jsContext[@"share"] = ^(JSValue *shareData) {//首先这里要注意，回调的参数不能直接写NSDictionary类型，为何呢？//仔细看，打印出的确实是一个NSDictionary，但是result字段对应的不是block而是一个NSDictionary  NSLog(@"%@", [shareData toObject]);//获取shareData对象的result属性，这个JSValue对应的其实是一个javascript的function。JSValue *resultFunction = [shareData valueForProperty:@"result"];//回调block，将js的function转换为OC的blockvoid(^result)(BOOL) = ^(BOOLisSuccess) {[resultFunction callWithArguments:@[@(isSuccess)]];};//模拟异步回调dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3*NSEC_PER_SEC)), dispatch_get_main_queue(), ^{NSLog(@"回调分享成功");result(YES);});};

其中一些坑，已经在代码的注释写的比较清楚了，要这里注意JavaScript的function状语从句：Objective-C的block的转换。

从上面的一些探讨和尝试来看，证明足以JavaScriptCore的强大，这里不再展开，小伙伴们可以自行探索。

UIWebView中的Cookie的管理

饼干简介

说到Cookie，或许有些小伙伴会比较陌生，有些小伙伴会比较熟悉。如果项目中，所有页面都是纯原生来实现的话，一般Cookie这个东西或许我们永远也。不会接触到。但是，这里还是要说一下Cookie，因为它真的很重要，由它产生的一些坑也很多。

Cookie在网络利用的最多的地方，是用来记录各种状态。你比如在Safari中打开_百度，然后登陆自己的账号，之后打开所有百度相关的页面，都会是登陆状态，而且当你关了电脑，下开机次再次打开Safari打开_百度，会发现还是登陆状态，其实这个就利用了Cookie。Cookie中记录了你百度账号的一些信息，有效期等，也维持了跨域请求时登录状态的统计性。

看到可以Cookie的域各不相同，有效期也各不相同，一般.baidu.com这样的域的Cookie就是为了跨域时，可以维持一些状态。

那么在应用程序中，Cookie的最常用的就是维持登录状态了。一般本地端都有自己的一套完整登录注册逻辑，一般大部分页面都是原生实现的。当然，也会有一些页面是H5来实现的，虽然h5页面在App中通过WebView加载或多或少都会有点性能问题，感觉不流畅或者体验不好，但是它的灵活性是Native App无法比拟的。那么由此，便产生了一种需求，当本地端用户是登录状态的，打开一个H5页面，H5也要维持用户的登录状态。

这个需求看似简单，如何实现呢？一般的解决方案是本地保存登录状态的饼干，在打开H5页面中，把饼干添加上，以此来维持登录状态。其实坑还是有很多的，比如用户登录或者退出了，H5页面的登录状态也变了，需要刷新，什么时候刷新？WKWebView中Cookie丢失问题？简单这里说下UIWebView的Cookie管理，后面的章节再介绍WKWebView。

曲奇管理

UIWebView的Cookie管理很简单，一般不需要我们手动操作Cookie，所有因为Cookie都会被[NSHTTPCookieStorage sharedHTTPCookieStorage]这个单例管理，而且UIWebView会自动同步CookieStorage中的Cookie的，所以只要我们在本地端，正常登陆退出，H5在适当时候刷新，就可以正确的维持登录状态，不需要做多余的操作。

可能有一些情况下，我们需要在访问某个链接时，一个添加固定Cookie用来做区分，就那么可以通过header来实现

NSMutableURLRequest*request = [NSMutableURLRequestrequestWithURL:[NSURLURLWithString:@"http://www.baidu.com"]];[request addValue:@"customCookieName=1314521;"forHTTPHeaderField:@"Set-Cookie"];[self.webView loadRequest:request];

也可以主动操作NSHTTPCookieStorage，添加一个自定义Cookie

NSHTTPCookie*cookie = [NSHTTPCookiecookieWithProperties:@{NSHTTPCookieName:@"customCookieName",NSHTTPCookieValue:@"1314521",NSHTTPCookieDomain:@".baidu.com",NSHTTPCookiePath:@"/"}];[[NSHTTPCookieStoragesharedHTTPCookieStorage] setCookie:cookie];//Cookie存在则覆盖，不存在添加

还有一些常用的方法，如读取所有Cookie

NSArray*cookies = [NSHTTPCookieStoragesharedHTTPCookieStorage].cookies;

Cookie转换成HTTPHeaderFields，并到添加request的header中

//Cookies数组转换为requestHeaderFieldsNSDictionary*requestHeaderFields = [NSHTTPCookierequestHeaderFieldsWithCookies:cookies];//设置请求头request.allHTTPHeaderFields = requestHeaderFields;

来说本世纪的牛顿UIWebView的Cookie管理比较简单，小伙伴们可以自己写个演示测试一下，发挥你们的想象。

未完待续

关于UIWebView的介绍，使用以及UIWebView进行JS与OC的交互，Cookie的管理，就先简单介绍到这里。如果有小伙伴对于WebViewJavascriptBridge比较感兴趣，可以留言，根据留言我考虑一下写一篇文章，分析它的详细实现。

另外，将为后续介绍您WKWebView的用法英语谚语，一些OC与JS交互，饼干管理，在如何Safari中调试以及一些不为人知的坑等，敬请期待〜

后续文章已发布：

iOS中UIWebView与WKWebView，JavaScript与OC交互，Cookie管理看我就够（中）