<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
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
