关于JS和OC交互
来源：互联网 发布：python 获取期货数据 编辑：程序博客网 时间：2024/04/29 06:46
<span style="font-family: STHeiti, 'Microsoft Yahei', Simsun; background-color: rgb(255, 255, 255);">公司项目需要用到js和ios的交互，需要实现的功能是在html页面中得某个按钮点击事件能在OC中捕捉到，最终实现两者之间的无缝连接，虽然html页面相比较原生还是有一定滞后性。</span>
需求就是与JS交互。
目前很流行的库有WebviewJavaScriptBridge和OVGap，这两个库都是让webview与JS建立起一条桥梁，
这样就可以相互通信了。
参考资料见：http://mp.weixin.qq.com/s?__biz=MzIzMzA4NjA5Mw==&mid=214063688&idx=1&sn=903258ec2d3ae431b4d9ee55cb59ed89#rd
首先导入一个Html页面
<span style="font-size:12px;"><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>嫡女不好惹：乱世毒后首页,幺蛾子大人,古代言情-书海小说网</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/><meta name="keywords" content="" /><meta name="description" content="" /><meta name="author" content="http://www.shuhai.com (书海小说网)" /><meta name="copyright" content="" /><link href="http://www.shuhai.com/themes/3g/style/book.css" rel="stylesheet" type="text/css" /><!--<script src="http://www.shuhai.com/themes/3g/js/jquery-1.8.3.min.js"></script>--><script type="text/javascript">var _login = "http://3g.shuhai.com/login";</script><script src="http://www.shuhai.com/themes/3g/js/jquery-1.8.3.min.js"></script><script src="http://www.shuhai.com/themes/3g/js/jquery.cookie.js"></script> <script src="http://www.shuhai.com/scripts/validator-0.7.0/jquery.validator.js"></script><script src="http://www.shuhai.com/scripts/validator-0.7.0/local/zh_CN.js"></script><script src="http://www.shuhai.com/scripts/pagewap.js"></script><script src="http://www.shuhai.com/themes/3g/js/layer/layer.m.js"></script><script src="http://www.shuhai.com/themes/3g/js/mod.wap.article.js"></script></head><body><div class="header"><div class="shouye"><a href="http://3g.shuhai.com">首页</a></div> <div class="title"><a href="javascript:;">嫡女不好惹：乱世毒后</a></div> <div class="shujia"><a href="http://3g.shuhai.com/article/bcView">书架</a></div></div><div class="content1"> <div class="bok"> <img src="http://www.shuhai.com/files/article/image/37/37265/37265s.jpg" alt="嫡女不好惹：乱世毒后" /> <ul class="li-bok"> <li><span>作者：</span>幺蛾子大…</li> <li><span>类别：</span><a href="http://3g.shuhai.com/shuku/101_0_0_0_0_1_100.html" style="color: #27201f;">古代言情</a></li> <li><span>状态：</span>连载中</li> <li><span>字数：</span><em class="org">41.7</em>万</li> <li><span>点击：</span><em class="org">20.82</em>万</li> </ul> <div class="btn"> <a href="javascript:;" target="_self" class="btn1"onclick="OCModel.showAlertMsg('js title', 'js message')">免费阅读</a> <a href="http://3g.shuhai.com/huodong/addBookCase/37265.html" target="_self" class="btn2" data-act="add_bookcase">加入书架</a> </div> <div class="jianjie"> <em>简介：</em> <p> 出生高贵，背景强大，才貌无双，又如何？ 到头来都是为他人作嫁衣裳！ 错信继母和庶妹，被夫君厌弃，堂堂……<a href="javascript:;" data-act="text_spread">展开</a></p> <p style="display: none"> 出生高贵，背景强大，才貌无双，又如何？ 到头来都是为他人作嫁衣裳！ 错信继母和庶妹，被夫君厌弃，堂堂太子妃，沦落为浣衣奴，受尽折磨而死。 重生为人，当一切悲剧还来不及上演，她总算学会了曾经厌恶的勾心斗角，却为自己创造了锦绣人生！<a href="javascript:;" data-act="text_flod">折叠</a></p> </div> </div> <div class="dian" data-act="j_act"> <a href="http://3g.shuhai.com/huodong/vote/37265.html" id="vote" class="tab"><span class="tabtop">推荐</span><span class="tabxia">24次</span></a> <a href="http://3g.shuhai.com/huodong/reward/37265.html" id="reward" class="tab"><span class="tabtop1">打赏</span><span class="tabxia">0次</span></a> <a href="http://3g.shuhai.com/huodong/vipvote/37265.html" id="vipvote" class="tab nomargin"><span class="tabtop2">月票</span><span class="tabxia">13张</span></a> </div> <div id="tab_box1" class="trendbox"></div></div><div class="content2"><h2>本书目录<span>(161章)</span></h2> <div class="news"> <div class="new"><span>最新</span><a style="color: #27201f;" href="http://3g.shuhai.com/read/37265/1770238.html">第161章 机智太子<img style="margin-left: 5px;" src="http://www.shuhai.com/themes/3g/images/vip.jpg" /></a></div><div class="time">2015-11-11 15:33:44</div> </div> <div class="table"> <div class="titbut" id="tabs1"> <a href="javascript:void(0)" class="thistab">正序</a> <a href="javascript:void(0)">倒序</a> </div> <div id="tab_conbox1"> <div class="tab1 st"> <ul> <li><a href="http://3g.shuhai.com/read/37265/1715259.html">第1章 皇后召见</a><span>1581字</span></li> <li><a href="http://3g.shuhai.com/read/37265/1715260.html">第2章 蚀骨之恨</a><span>1312字</span></li> <li><a href="http://3g.shuhai.com/read/37265/1715261.html">第3章 阻止悲剧</a><span>1308字</span></li> <li><a href="http://3g.shuhai.com/read/37265/1715262.html">第4章 救薛氏</a><span>1315字</span></li> <li><a href="http://3g.shuhai.com/read/37265/1715263.html">第5章 素问被诬陷</a><span>1359字</span></li> </ul> <div class="more"> <a href="http://3g.shuhai.com/chapter/37265/"> 更多目录 > </a> </div> </div> <div class="tab1" style="display:none;"> <ul> <li><a href="http://3g.shuhai.com/read/37265/1770238.html">第161章 机智太子<img style="margin-left: 5px;" src="http://www.shuhai.com/themes/3g/images/vip.jpg" /></a><span>3141字</span></li> <li><a href="http://3g.shuhai.com/read/37265/1767470.html">第160章 被抓包了<img style="margin-left: 5px;" src="http://www.shuhai.com/themes/3g/images/vip.jpg" /></a><span>3003字</span></li> <li><a href="http://3g.shuhai.com/read/37265/1767374.html">第159章 才华横溢方公子<img style="margin-left: 5px;" src="http://www.shuhai.com/themes/3g/images/vip.jpg" /></a><span>3040字</span></li> <li><a href="http://3g.shuhai.com/read/37265/1767125.html">第158章 比试<img style="margin-left: 5px;" src="http://www.shuhai.com/themes/3g/images/vip.jpg" /></a><span>2987字</span></li> <li><a href="http://3g.shuhai.com/read/37265/1767124.html">第157章 棋局<img style="margin-left: 5px;" src="http://www.shuhai.com/themes/3g/images/vip.jpg" /></a><span>3040字</span></li> </ul> <div class="more"> <a href="http://3g.shuhai.com/chapter/37265/"> 更多目录 > </a> </div> </div> </div> </div></div><div class="content3"><h2>书评专区<a href="http://3g.shuhai.com/reviews/37265/">我要评论 ></a></h2> <ul> <li> <div class="head"> <img src="http://www.shuhai.com/images/noavatarm.jpg" alt="" class="faceimg" /> <span class="facezhe"><img src="http://www.shuhai.com/themes/3g/images/headzhe.png" alt="" /></span> </div> <div class="right"> <p class="blue name">暴力校园</p> <p class="summary">书写得很好，作者大大辛苦了，投……</p> <p class="date">2015-11-05 23:01:01</p> <p class="comment"><a href="http://3g.shuhai.com/showReplies/37265/?rid=96960&page=">我要回复</a></p> </div> <span class="line"></span> </li> <li> <div class="head"> <img src="http://www.shuhai.com/images/noavatarm.jpg" alt="" class="faceimg" /> <span class="facezhe"><img src="http://www.shuhai.com/themes/3g/images/headzhe.png" alt="" /></span> </div> <div class="right"> <p class="blue name">wangle111</p> <p class="summary">书写得很好，作者大大辛苦了，投……</p> <p class="date">2015-11-02 11:31:14</p> <p class="comment"><a href="http://3g.shuhai.com/showReplies/37265/?rid=96174&page=">我要回复</a></p> </div> <span class="line"></span> </li> <li> <div class="head"> <img src="http://www.shuhai.com/images/noavatarm.jpg" alt="" class="faceimg" /> <span class="facezhe"><img src="http://www.shuhai.com/themes/3g/images/headzhe.png" alt="" /></span> </div> <div class="right"> <p class="blue name">淡蓝蓝蓝</p> <p class="summary">如此佳作怎能不支持？2张月票奉……</p> <p class="date">2015-11-01 23:06:00</p> <p class="comment"><a href="http://3g.shuhai.com/showReplies/37265/?rid=96050&page=">我要回复</a></p> </div> <span class="line"></span> </li> <li> <div class="head"> <img src="http://www.shuhai.com/images/noavatarm.jpg" alt="" class="faceimg" /> <span class="facezhe"><img src="http://www.shuhai.com/themes/3g/images/headzhe.png" alt="" /></span> </div> <div class="right"> <p class="blue name">淡蓝蓝蓝</p> <p class="summary">书写得很好，作者大大辛苦了，投……</p> <p class="date">2015-10-30 21:41:00</p> <p class="comment"><a href="http://3g.shuhai.com/showReplies/37265/?rid=95519&page=">我要回复</a></p> </div> <span class="line"></span> </li> <li> <div class="head"> <img src="http://www.shuhai.com/images/noavatarm.jpg" alt="" class="faceimg" /> <span class="facezhe"><img src="http://www.shuhai.com/themes/3g/images/headzhe.png" alt="" /></span> </div> <div class="right"> <p class="blue name">淡蓝蓝蓝</p> <p class="summary">书写得很好，作者大大辛苦了，投……</p> <p class="date">2015-10-28 12:55:33</p> <p class="comment"><a href="http://3g.shuhai.com/showReplies/37265/?rid=95015&page=">我要回复</a></p> </div> <span class="line"></span> </li> <li> <div class="head"> <img src="http://www.shuhai.com/images/noavatarm.jpg" alt="" class="faceimg" /> <span class="facezhe"><img src="http://www.shuhai.com/themes/3g/images/headzhe.png" alt="" /></span> </div> <div class="right"> <p class="blue name">淡蓝蓝蓝</p> <p class="summary">书写得很好，作者大大辛苦了，投……</p> <p class="date">2015-10-27 23:42:00</p> <p class="comment"><a href="http://3g.shuhai.com/showReplies/37265/?rid=94957&page=">我要回复</a></p> </div> <span class="line"></span> </li> </ul> <div class="more"> <a href="http://3g.shuhai.com/reviews/37265/">更多评论 ></a> </div> </div><div class="content4"><div class="reci"> <span>热词：</span><a href="http://3g.shuhai.com/search/与美合租">与美合租</a><a href="http://3g.shuhai.com/search/黑道学生">黑道学生</a><a href="http://3g.shuhai.com/search/风水先生">风水先生</a> </div> <div class="dan"> <div class="so2"> <form action="http://3g.shuhai.com/search/" method="post" data-name="search_form"> <input type="text" placeholder="请输入关键词搜索..." name="searchkey" id="searchkey" size="14" class="intxt"/> <button type="submit" class="btn_so" data-act="search_sub" >搜索</button> </form> </div></div></div><div class="footer"> <p class="link"><a href="http://m.shuhai.com/" target="_self">触屏版</a><!-- · <a href="http://www.shuhai.com/" target="_self">电脑版</a>--> · <a href="http://appdata.shuhai.com/shuhai_server/servlet/DownloadServlet?apptype=1&appbookid=0" target="_self">客户端</a> · <a href="javascript:;" id="backtt">回顶部</a><!-- · <a href="female.html" target="_self">建议</a>--></p> 陕IPC备10012047<br> 2011-2014 书海小说网 <img src="http://hm.baidu.com/hm.gif?si=fd467431a675649b3f9d8880dcdbebed&et=0&nv=1&st=1<=1408431128&v=wap-0-0.2&rnd=9706302271" width="0" height="0" /><img src="http://c.cnzz.com/wapstat.php?siteid=1253129622&r=http%3A%2F%2F3g.shuhai.com%2F&rnd=1454442326" width="0" height="0"/></div><script type="text/javascript">function act(num,obj){$('dd.current'+num).removeClass("current"+num);$(obj).parent().addClass("current"+num);$('#current'+num).val($(obj).attr("id")); } function addLoad(abelId,ContainerId){var i = 2;$('#'+abelId).on('click',function(e){ e.stopPropagation(); e.preventDefault(); var loadurl = this.href, tips = layer.open({type: 2,content: '加载中……'}); loadurl = loadurl.indexOf("display=") < 0 ? this.href +"?page="+i : this.href +"&page="+i; GPage.getJson(urlParams(loadurl,'ajax_gets='+ContentTag),function(data){if ($.trim(data) != ""){ layer.close(tips); $('#'+ContainerId).html($('#'+ContainerId).html()+data); var isLast = data.split("<li>").length-1; if(isLast < '10'){$('#'+abelId).parent("p").remove();} i++; }else{ layer.close(tips); $('#'+abelId).parent("p").remove(); } }); }); }$(function(){// 加入书签$("[data-act=add_bookcase]").on("click", function(event){event.preventDefault();if(getUserId()<1){ location.href = _login; } else { var _url = $(this).attr("href");GPage.getJson(_url, function(data){if ("OK"===data.status) {layer.open({ content: data.msg,// btn: ['OK']，time:2});} else {layer.open({ content: data.msg,// btn: ['OK'],time:2});}}) }})})</script></body></html></span><span style="color:#ff6666;font-size: 17px;"></span>接下来就是与OC交互 这里
@interface HYBJsObjCModel :NSObject <JavaScriptObjectiveCDelegate>
模型用于注入JS的模型，这样就可以通过模型来调用方法
在.h中
//// ViewController.h// JavaScriptAndObjectiveC//// Created by huangyibiao on 15/10/13.// Copyright © 2015年 huangyibiao. All rights reserved.//#import <UIKit/UIKit.h>#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// 此模型用于注入JS的模型，这样就可以通过模型来调用方法。@interface HYBJsObjCModel : NSObject <JavaScriptObjectiveCDelegate>@property (nonatomic, weak) JSContext *jsContext;@property (nonatomic, weak) UIWebView *webView;@end@interface ViewController : UIViewController@end
在.m中
showAlert用来发送通知，因为类继承与NSObject无controller得跳转方法，这样在HTML页面点击阅读按钮就会跳转到oc阅读页面实现交互
//// ViewController.m// JavaScriptAndObjectiveC//// Created by huangyibiao on 15/10/13.// Copyright © 2015年 huangyibiao. All rights reserved.//#import "ViewController.h"#import "readViewController.h"#import "IanAlert.h"@interface ViewController () <UIWebViewDelegate>@property (nonatomic, strong) UIWebView *webView;@property (nonatomic, strong) JSContext *jsContext;@end@implementation ViewController- (void)viewDidLoad { [super viewDidLoad]; // 自定义导航栏的"返回"按钮 [IanAlert showLoading:@"加载中"]; UIBarButtonItem *LogInButton = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"back"] style:UIBarButtonItemStylePlain target:self action:@selector(presentLeftMenuViewController:)]; if ([self.navigationItem respondsToSelector:@selector(leftBarButtonItems)]) { self.navigationItem.leftBarButtonItems = [NSArray arrayWithObjects:LogInButton, nil]; }else { self.navigationItem.leftBarButtonItem = LogInButton; } [self.view addSubview:self.webView]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(haha:) name:@"textchange" object:nil]; }- (void)presentLeftMenuViewController:(id)sender{ [self.navigationController popViewControllerAnimated:YES];}-(void)haha:(id)sender{ readViewController *readV = [[readViewController alloc] init]; readV.bookID = @"37247"; readV.strChapOrder = @"1"; readV.bookNameStr = @""; readV.bookUrlStr = @""; readV.bookContent = @[]; readV.bookAuthor = @""; readV.bookNewSection = @""; [self presentViewController:readV animated:YES completion:nil];}- (UIWebView *)webView { if (_webView == nil) { _webView = [[UIWebView alloc] initWithFrame:self.view.bounds]; _webView.scalesPageToFit = YES; NSURL *url = [[NSBundle mainBundle] URLForResource:@"shuhai" withExtension:@"html"]; NSURLRequest *request = [NSURLRequest requestWithURL:url]; [_webView loadRequest:request]; _webView.delegate = self; } return _webView;}#pragma mark - UIWebViewDelegate- (void)webViewDidFinishLoad:(UIWebView *)webView{ [IanAlert hideLoading:^(BOOL Finished){ NSLog(@"test"); }]; self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; // 通过模型调用方法，这种方式更好些。 HYBJsObjCModel *model = [[HYBJsObjCModel 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); };}@end@implementation HYBJsObjCModel// Js调用了callSystemCamera- (void)callSystemCamera { NSLog(@"JS调用了OC的方法，调起系统相册"); // JS调用后OC后，又通过OC调用JS，但是这个是没有传参数的 JSValue *jsFunc = self.jsContext[@"jsFunc"]; [jsFunc callWithArguments:nil];}- (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]; // }); [[NSNotificationCenter defaultCenter] postNotificationName:@"textchange" object:nil];}- (void)callWithDict:(NSDictionary *)params { NSLog(@"Js调用了OC的方法，参数为：%@", params);}- (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}]];}@end 0 0
- 关于JS和OC交互
- OC和JS交互
- JS和OC交互
- 关于oc和js交互那点事
- OC和JS交互、JS和OC交互
- iOS ---oc和js交互
- js和oc相互交互
- OC 和JS的交互
- iOS--js和oc交互
- OC和JS交互 -- JavaScriptCore
- WKWebView OC和JS交互
- 关于OC与JS交互的交流
- OC和JS交互 JS端代码
- webView中OC和JS交互
- iOS ---oc和js交互2
- iOS - OC和网页JS的交互
- 10分钟 搞定JS和OC交互
- oc 和 h5中js 的交互
- HTML5 audio标签使用js进行播放控制实例
- java集合之Queue
- Android触摸屏事件派发机制详解与源码分析二(ViewGroup篇)
- c++面试题2015
- opencv中图像的深度和通道
- 关于JS和OC交互
- unity 消息分发
- SimpleDateFormat使用详解
- PYTHON 操作 REDIS
- Windows下gvim配置
- Windows下配置Redis环境
- php开启mbstring扩展并设置支持utf-8编码
- C/C++面试题
- java集合之LinkedList
