登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

JS代码和OC代码的交互小案例

[复制链接]
来自: 李世铿 分类: iOS精品源码 上传时间: 2016-4-15 20:57:37
Tag:源码下载 HTML5 文章 技术 开发

项目介绍:

文:DXSmile (github)


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


今天我就来和大家简单的说一下HTML5中,JS代码和OC代码的交互, 由于时间关系,我这里只做简单的描述,具体深入的交互,需要大家后面不断的练习;
JS和OC的交互方式简单来说有两种情况:交互前提: 在OC端使用webView!!!
1.OC调用JS - OC执行JS
代码步骤1> 显示页面,其实就是加载请求 :
使用 [self.webView loadRequest:request];
并且让控制器成为webView的代理, 监听网页加载完毕 :  使用<UIWebViewDelegate>的代理方法:
[Objective-C] 查看源文件 复制代码
/**
 *  网页加载完毕
 */
- (void)webViewDidFinishLoad:(UIWebView *)webView { }


步骤2> 让页面调用OC中的脚本,它属于webView的一个方法,特别提醒 : 执行JS脚本代码仅仅只有这一种方法:
       [webView stringByEvaluatingJavaScriptFromString“JS代码”];

举例 一:
[Objective-C] 查看源文件 复制代码
/**
 *  网页加载完毕
 */
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *js = @"document.getElementsByTagName('footer')[0].remove();";
    [webView stringByEvaluatingJavaScriptFromString:js];
}


举例 二:
[Objective-C] 查看源文件 复制代码
/**
 *  网页加载完毕
 */
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *js = @"document.getElementsByTagName('footer')[0].remove();";
    [webView stringByEvaluatingJavaScriptFromString:js];
}



2. JS调用OC - 就是JS调用OC中的方法
步骤1> 需自定义href协议,可以指定方法名和参数 : 然后将OC方法和参数值拼接在一个URL中
如下: 自定义href协议
[Objective-C] 查看源文件 复制代码
 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:@"<img onload=\"%@\" width=\"%d\" height=\"%d\" src=\"%@\"><div>",onload,width , height, img.src];


将OC方法和参数值拼接在一个URL中:
[Objective-C] 查看源文件 复制代码
/*  通用url的设计
    1> 找一个固定的协议: 如  dx:
    2> 一般有2个参数   2.1> 方法名  2.2> 方法参数
*/
      window.location.href = 'dx:saveImageToAblum:&' + this.src


步骤2> 使用<UIWebViewDelegate>代理协议中的方法拦截请求 :  每次发送请求之前系统会自动调用该代理方法:
[Objective-C] 查看源文件 复制代码
/**
    调用 : 每当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的交互,就是上面两种情况, 理清思路,就可以很好的做好交互了;接下来就是需要写代码了;下面我附上一份我自己写的代码:
[Objective-C] 查看源文件 复制代码
#pragma mark - 发送get请求 获取数据
/** 发送get请求,获取新闻的详情 */
- (void)getUpData {
    // 测试地址: [url]http://c.m.163.com/nc/article/[/url]{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代码:
[Objective-C] 查看源文件 复制代码
#pragma mark - 拼接html,显示数据到webView上
 /** 显示到webView上 */
- (void)showDetailForWebView {
    // 1.初始化一个可变字符串
    NSMutableString *html = [NSMutableString string];
    // 2.拼接html代码
    [html appendString:@"<html>"];
    // 2.1 头部内容
    [html appendString:@"<head>"];

    // 引入css文件
    NSURL *path = [[NSBundle mainBundle]URLForResource:@"DXDetail.css" withExtension:nil];
    [html appendFormat:@"<link rel=\"stylesheet\" href=\"%@\">", path];

    [html appendString:@"</head>"];

    // 2.2 具体内容
    [html appendString:@"<body>"];

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

    [html appendString:@"</body>"];

    // 2.3 尾部内容
    [html appendString:@"</html>"];

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

}

/** 拼接body的内容  (也就是初始化body内容) */
- (NSString *)setupBody {

    NSMutableString *bodyM = [NSMutableString string];


    // 拼接标题
    [bodyM appendFormat:@"<div class=\"title\">%@</div>", self.detailNews.title];

    // 拼接时间
    [bodyM appendFormat:@"<div class=\"time\">%@</div>",self.detailNews.ptime];

    // 拼接图片  img.ref ==  <!--IMG#0-->  <!--IMG#0--> --> <img src=img.src>
    [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文件

[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代码的交互:
[Objective-C] 查看源文件 复制代码
#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>的代理方法
[Objective-C] 查看源文件 复制代码
#pragma mark - 实现<UIWebViewDelegate>的代理方法
// 调用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;
}







相关源码推荐:

我来说两句
*滑动验证:
所有评论(87)
yangxl 2016-4-15 23:44:22
谢谢楼主        学习学习!
回复
yangxl 2016-4-15 23:44:55
感谢分享,Code4App有你更精彩:)
回复
yinyuanxing 2016-4-16 09:44:49
淡定,淡定,淡定……
回复
SUN1191 2016-4-16 10:54:59
正需要啊,感谢楼主无私分享!
回复
KingHEM 2016-4-16 11:34:07
精华内容,楼主V5!
回复
SUN1191 2016-4-16 11:38:37
楼主用心了,内容非常精彩。
回复
dhiraj1990 2016-4-16 13:35:30
正需要啊,感谢楼主无私分享!
回复
qc_51vip@163.co 2016-4-16 14:24:20
正需要啊,感谢楼主无私分享!
回复
小耳 2016-4-16 14:37:57
精华内容,楼主V5!
回复
提取码:  下载次数:91 状态:已购或VIP 售价:0(原价:5)金钱 下载权限:初级码农 
3032 0 91
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表