关于JS和OC交互

<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&lt=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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值