浅谈JS代码和OC代码的交互

Love The Way You Lie 2022-01-07 01:07 256阅读 0赞

以下为个人愚见, 如有不妥,望大家斧正!!!  
本文的GitHub源码下载地址:  
https://github.com/DXSmile/JS-OC.git

如需转载,请注明转载自DXSmile的  
GitHub项目https://github.com/DXSmile/JS-OC.git

### 简述: ###

随着应用开发技术的日渐更新迭代, 特别是HTML5出来之后, 现在很多的移动端应用开发也越来越趋向于使用HTML5的技术来设计和完成相对复杂的UI页面设计和交互, 就像之前我又一篇文章写的一样,  
HTML5很可能就是下一个技术的焦点, 很多的语言,平台,都将会更加兼容HTML5技术,企业也将会越来越多的使用HTML5, 那么作为一名iOS移动开发攻城狮来说, 我们就需要不断的学习成长,尽快弄精通HTML5和OC,和swift的交互,从而来实现更多更新的技术;  
前文链接如下:  
[你不得不了解,甚至立马学习的HTML5][HTML5]

今天我就来和大家简单的说一下HTML5中,JS代码和OC代码的交互, 由于时间关系,我这里只做简单的描述,具体深入的交互,需要大家后面不断的练习;

### JS和OC的交互方式简单来说有两种情况: ###

#### 交互前提: 在OC端使用webView!!! ####

#### 1.OC调用JS - OC执行JS代码 ####

步骤1> 显示页面,其实就是加载请求 :  
使用 \[self.webView loadRequest:request\];  
并且让控制器成为webView的代理, 监听网页加载完毕 : 使用的代理方法:

/**
     *  网页加载完毕
     */
    - (void)webViewDidFinishLoad:(UIWebView *)webView { }
     ```
    步骤2> 让页面调用OC中的脚本,它属于webView的一个方法,特别提醒 : 执行JS脚本代码仅仅只有这一种方法:

\[webView stringByEvaluatingJavaScriptFromString:@“JS代码”\];  
\`\`\`

举例 一:

/**
     *  网页加载完毕
     */
    - (void)webViewDidFinishLoad:(UIWebView *)webView
    {
        NSString *js = @"document.getElementsByTagName('footer')[0].remove();";
        [webView stringByEvaluatingJavaScriptFromString:js];
    }

举例 二:

- (void)webViewDidFinishLoad:(UIWebView *)webView
    {
        NSString *JS代码 = @"function login (username, pwd) {  "
                        "   return 10;"
                        "       }"
                        "   login();";
       //     在OC中调用JS的函数（执行JS代码）
       [webView stringByEvaluatingJavaScriptFromString:@“JS代码”];
    }
     ```
    ####2. JS调用OC - 就是JS调用OC中的方法
    步骤1> 需自定义href协议,可以指定方法名和参数 : 然后将OC方法和参数值拼接在一个URL中
    如下: 自定义href协议

NSString *onload = @"this.onclick = function() \{"  
1> 打电话方法,有参数 "window.location.href = 'dx:call:&10086'"  
2> 发信息方法,有参数 "window.location.href = 'dx:sendMsg:&10010'"  
3> 关机方法,无参数 "window.location.href = 'dx:shutdown'"  
"\};";  
\[imgHtml appendFormat:@"![%5C%22%@%5C%22][5C_22_5C_22]*

*",onload,width , height, img.src\];  
`将OC方法和参数值拼接在一个URL中:`  
/ 通用url的设计  
1> 找一个固定的协议: 如 dx:  
2> 一般有2个参数 2.1> 方法名 2.2> 方法参数  
\*/  
window.location.href = 'dx:saveImageToAblum:&' + this.src*

步骤2> 使用<UIWebViewDelegate>代理协议中的方法拦截请求 :  每次发送请求之前系统会自动调用该代理方法:

*/\*\*  
调用 : 每当webView发送一个请求之前都会先调用这个方法  
参数说明:  
request : 即将发送的请求  
BOOL : Yes : 允许发送这个请求 No : 禁止发送这个请求  
navigationType : 是否在新窗口中打开  
\*/*

*(BOOL)webView:(UIWebView )webView shouldStartLoadWithRequest:(NSURLRequest )request navigationType:(UIWebViewNavigationType)navigationType  
\{  
// a) 在这个代理方法中拦截JS请求的URL  
// b) 从URL中截取相应的方法名和参数  
// c) 调用方法，传递参数  
  
return YES/NO;  
\}*

##### 小结: 通常情况来说, JS和OC的交互,就是上面两种情况, 理清思路,就可以很好的做好交互了;接下来就是需要写代码了;
    下面我附上一份我自己写的代码:

# *pragma mark - 发送get请求 获取数据* #

*/\*\* 发送get请求,获取新闻的详情 \*/*

*(void)getUpData \{  
// 测试地址: http://c.m.163.com/nc/article/\{docid\}/full.html  
NSString \*url = \[NSString stringWithFormat:@"http://c.m.163.com/nc/article/%@/full.html", self.headline.docid\];*

*\[\[DXHTTPManager manager\] GET:url parameters:nil success:^(NSURLSessionDataTask \* \_Nonnull task, NSDictionary \*responseObject) \{  
\[responseObject writeToFile:@"/Users/xiongdexi/Desktop/Data/newsDetail.plist" atomically:YES\];*

// 根据对应的docid赋值
      self.detailNews = [DXDetail detailWithDict:responseObject[self.headline.docid]];
    
      // 显示到webView上
      [self showDetailForWebView];

*\} failure:^(NSURLSessionDataTask \* \_Nullable task, NSError \* \_Nonnull error) \{  
NSLog(@"加载出错, %@", error);  
\}\];*

*\}*

接下来需要拼接html代码:

# *pragma mark - 拼接html,显示数据到webView上* #

*/\*\* 显示到webView上 \*/*

*(void)showDetailForWebView \{  
// 1.初始化一个可变字符串  
NSMutableString \*html = \[NSMutableString string\];  
// 2.拼接html代码  
\[html appendString:@""\];  
// 2.1 头部内容  
\[html appendString:@"*

*"\];*

*// 引入css文件  
NSURL \*path = \[\[NSBundle mainBundle\]URLForResource:@"DXDetail.css" withExtension:nil\];  
\[html appendFormat:@"", path\];*

*\[html appendString:@""\];*

*// 2.2 具体内容  
\[html appendString:@"*

*"\];*

*// 将图片插入插入body对应的标记中  
\[html appendString:\[self setupBody\]\];*

*\[html appendString:@""\];*

*// 2.3 尾部内容  
\[html appendString:@""\];*

*// 3. 显示网页  
\[self.webView loadHTMLString:html baseURL:nil\];*

*\}*

*/\*\* 拼接body的内容 (也就是初始化body内容) \*/*

*(NSString \*)setupBody \{*

*NSMutableString \*bodyM = \[NSMutableString string\];*

*// 拼接标题  
\[bodyM appendFormat:@"*

*%@*

*", self.detailNews.title\];*

*// 拼接时间  
\[bodyM appendFormat:@"*

*%@*

*",self.detailNews.ptime\];*

*// 拼接图片 img.ref == --> ![img.src][5C_22_5C_22]  
\[bodyM appendString:self.detailNews.body\];*

*for (DXDetailImg img in self.detailNews.img) \{  
NSMutableString imgHtml = \[NSMutableString string\];*

// 定义图片的宽高比 550*344  用下面的方法切割尺寸字符串
      NSArray *pixel = [img.pixel componentsSeparatedByString:@"*"];
      int width = [[pixel firstObject] intValue];
      int height = [[pixel lastObject] intValue];
      int maxWidth = [UIScreen mainScreen].bounds.size.width * 0.8;
      // 限制宽度
      if (width > maxWidth) {
          height = height * maxWidth / width; // 数学计算,等比例公式
          width = maxWidth;
      }
    
      // 拼接图片
      [imgHtml appendString:@"<div class=\"img-parent\">"];
    
      // 给图片绑定点击事件onclick
      // 注意这里需要先定义一个虚假的协议标记, 让webView不执行跳转,而是只获取图片的url
      // 为了预防图片太大,没有加载完成就调用了下面的保存方法,可以添加一个限制,用onload来限制让图片下载完成之后再执行保存
      NSString *onload = @"this.onclick = function() {"
                          "window.location.href = 'dx://?src=' + this.src;"
                          "};";
    
      [imgHtml appendFormat:@"<img onload=\"%@\" width=\"%d\" height=\"%d\" src=\"%@\">",onload, width, height, img.src];
    
      [imgHtml appendString:@"</div>"];
    
      // 用一个字符串代替另一个字符串   这样就可以让标记图片注释的部位用一张真正的图片来替代
      [bodyM replaceOccurrencesOfString:img.ref withString:imgHtml options:NSCaseInsensitiveSearch range:NSMakeRange(0, bodyM.length)];

*\}  
return bodyM;  
\}*

CSS代码: DXDetail.css文件

*.title \{  
text-align : center;  
font-size : 25px;  
color : black;  
font-weight : 5px;  
\}*

*.time \{  
text-align :center;  
font-size : 15px;  
color :gray;  
margin-top : 5px;  
margin-bottom : 10px;  
\}*

*.img-parent \{  
text-align :center;  
\}*

JS与OC代码的交互:

# *pragma mark - 用户点击图片后的事件 JS与OC代码的交互* #

*/\*\* 当用户点击图片时,弹出提示框 并将图片保存到相册 \*/  
// 这里需要用到JS代码和OC代码的交互*

*(void)saveImageToAlbum:(NSString \*)imgSrc \{*

*// 1. 提示一个弹窗,提示用户是否需要保存图片  
UIAlertController \*alert = \[UIAlertController alertControllerWithTitle:@"温馨提示" message:@"您是否需要将图片保存到相册?" preferredStyle:UIAlertControllerStyleActionSheet\];  
// 1.1 添加两个按钮到弹窗上  
\[alert addAction:\[UIAlertAction actionWithTitle:@"是的" style:UIAlertActionStyleDestructive handler:^(UIAlertAction \* \_Nonnull action) \{  
// 保存图片到相册  
\[self saveToAlbum:imgSrc\];  
\}\]\];*

*\[alert addAction:\[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil\]\];*

*// 1.2 显示  
\[self presentViewController:alert animated:YES completion:nil\];*

*\}*

*/\*\* 保存图片到相册的代码封装 \*/*

*(void)saveToAlbum:(NSString )imgSrc \{  
// UIWebView 的缓存由 NSURLCache 来管理  
// 获取缓存对象  
NSURLCache cache = \[NSURLCache sharedURLCache\];  
// 在缓存中取得对应请求的图片  
NSURLRequest request = \[NSURLRequest requestWithURL:\[NSURL URLWithString:imgSrc\]\];  
NSCachedURLResponse response = \[cache cachedResponseForRequest:request\];  
NSData \*imageData = response.data;*

*// 保存图片  
UIImage \*image = \[UIImage imageWithData:imageData\];  
// 调用保存到相册的方法 后面三个参数为空,表示保存之后什么都不做  
UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil);*

*\}*

执行<UIWebViewDelegate>的代理方法

# *pragma mark - 实现的代理方法* #

*// 调用webView的代理方法之一: 每当webView发送一个请求之前就会先执行一次的方法  
// 返回值: YES 表示允许发送请求, NO表示不允许发送请求  
// 在webView的代理方法中截取图片路径,调用保存图片到相册的方法*

*(BOOL)webView:(UIWebView )webView shouldStartLoadWithRequest:(NSURLRequest )request navigationType:(UIWebViewNavigationType)navigationType \{  
// 通过url来截图地址  
// 先将发送的请求里面的url转换成字符串  
NSString url = request.URL.absoluteString;  
// 找到标记所在的方法,确定截取范围  
NSRange range = \[url rangeOfString:@"dx://?src="\];  
// 判断获得的range是否不为空,如果不为空,就不允许发送请求,并截图范围之后的字符串,那就是图片的url  
if (range.length > 0) \{  
// 先确定获取范围的长度,  
NSUInteger loc = range.location + range.length;  
// 根据这个长度,取范围之后的字符串,就取得图片的路径了  
NSString imgSrc = \[url substringFromIndex:loc\];  
// 根据路径,将其保存到相册  
\[self saveImageToAlbum:imgSrc\];*

return NO;

*\}  
return YES;  
\}*

*\`\`\`  
效果图:*

*![效果图:首页][854995-20160313234359491-41895436.png]*

*![效果图:webView页面][webView]*

#### *上面的代码,只是部分,而且还没有做代码的重构,只是实现了功能, 如有需要源码,可以到我的GitHub首页下载源码,* ####

*如有不足之处,还望大家斧正!!! 360°感谢!!!*

*posted on 2016-03-13 23:45 [DXSmile][] 阅读(...) 评论(...) [编辑][Link 1] 收藏*

转载于:https://www.cnblogs.com/anRanTimes/p/5274272.html

[HTML5]: http://www.jianshu.com/p/18cc5847ad68
[5C_22_5C_22]: 
[854995-20160313234359491-41895436.png]: /images/20211227/60ff91b2f7af47d3b3be3c69d213a713.png
[webView]: /images/20211227/e8ea2f3a3b3b4c7d8eae2b5517a7ae48.png
[DXSmile]: https://www.cnblogs.com/anRanTimes/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=5274272