IOS-网络（网页开发-UIWebView，HTML，CSS，JavaScript，OC和JS代码互调）

 一、网页基础

  1 //
  2 //  ViewController.m
  3 //  IOS_0218_网页开发1
  4 //
  5 //  Created by ma c on 16/2/18.
  6 //  Copyright © 2016年 博文科技. All rights reserved.
  7 //
  8 
  9 #import "ViewController.h"
 10 
 11 @interface ViewController ()
 12 
 13 @property (weak, nonatomic) IBOutlet UIWebView *webView;
 14 
 15 @end
 16 
 17 @implementation ViewController
 18 
 19 /*
 20  一、UIWebView
 21  1.什么是UIWebView
 22  1>UIWebView是IOS内置浏览器控件
 23  2>系统自带的Safari浏览器就是通过UIWebView实现的
 24  
 25  2.UIWebView不但能加载远程的网页资源，还能在家大部分常见文件
 26  1>htmlhtm
 27  2>pdfdocppt	xt
 28  3>...
 29  
 30  二、网页的组成
 31  1.HTML（网页的具体内容和结构）
 32  2.CSS（网页的样式，美化网页最重要的一块）
 33  3.JavaScript（网页的交互效果，比如对用户鼠标事件做出响应）
 34  4.学习资料：http://www.w3school.com.cn/
 35  
 36  三、HTML
 37  1.全称：Hyper Text Markup Language，超文本标记语言
 38  2.其实就是文本，由浏览器将它解析成具体网页内容
 39  3.HTML组成：N个标签组成
 40  5.语法松散，最新版本HTML5
 41  6.常见标签：
 42      1>标题：h1,h2,h3
 43      2>段落：p
 44      3>换行：br
 45      4>容器：div，span（容纳其他标签）
 46      5>表格：table，tr，td
 47      6>列表：ul，ol，li
 48      7>图片：img
 49      8>表单：input
 50      9>链接：a
 51      7.编辑工具：dreamweaver，WebStorm
 52  
 53  四、CSS
 54  1.全称：Cascading Style Sheets，层叠样式表
 55  2.作用：美化网页
 56  3.CSS编写格式：键值对形式
 57  4.三种书写形式：
 58  1>行内样式：（内联样式）直接在标签的style属性中写
 59  <body style = "color: red;">
 60  2>内页样式：在本网页的style属性中写
 61  <style type = "text/css">
 62     body{
 63         color: red;
 64  }
 65  </style>
 66  3>外部样式：在单独的CSS文件中写，然后在网页中用link标签引用
 67  <link rel = "stylesheet" href = "test.css">
 68  
 69  五、CSS选择器
 70  1.标签选择器 - 选择对应的标签，为之添加样式
 71  2.类选择器 - 在标签后加class属性，用.类名添加样式
 72  3.id选择器 - 在标签后加id属性，用#id名添加样式
 73  4.群组选择器 - 格式：标签，.类名，#id名添加样式
 74  5.选择器组合 - 格式：标签.类名 或者 标签#id名
 75  6.后代选择器 - 格式：标签 子标签，标签 子标签
 76  7.子标签选择器 - 格式：标签 > 子标签（直接子标签）
 77  8.相邻兄弟选择器 - 格式：标签 + 标签
 78  9.属性选择器 - 格式：标签[属性] 或者 标签[属性][属性] 或者 标签[属性 = “属性名”]
 79  10.伪类
 80      1>:active 向被激活的元素添加样式
 81      2>:focus 想拥有键盘输入焦点的元素添加样式
 82      3>:hover 当鼠标悬浮在元素上方时，向元素添加样式
 83      4>:link 向未被访问的链接添加样式
 84      5>:visited 向已被访问的链接添加样式
 85      6>:first-child 向元素的第一个子元素添加样式
 86      7>:lang 向带有指定lang属性的元素添加样式
 87  11.伪元素
 88      1>:first-letter 向文本的第一个字母添加特殊样式
 89      2>:first-line 向文本的首行添加特殊样式
 90      3>:before 在元素之前添加内容
 91      4>:after 在元素之后添加内容
 92  
 93  六、选择器优先级
 94  1.优先级排序：
 95      1>important>内联>id>类>标签|伪类|伪元素>通配符>继承
 96  2.选择器的针对性越强，它的优先级越高
 97  3.选择器的权值
 98      1>通配选择符（*）：0
 99      2>标签：1
100      3>类：10
101      4>属性：10
102      5>伪类：10
103      6>伪元素：1
104      7>id：10
105      8>!important：100
106  4.原则：选择器权值加在一起，大的优先；如果相同，后定义的优先
107  
108  七、HTML标签类型(三大类)
109  1>块级标签：独占一行的标签
110    块级元素水平居中：设置自己的margin：0px auto
111  2>行内标签：多个行内标签能显示在一行
112    非块级元素水平居中：设置父类标签，text-align：center
113  3>行内-块级标签
114  
115  八、修改标签的显示类型
116  1.CSS中有个display属性，能修改标签的显示类型
117  1>none:隐藏标签
118  2>block:块级类型，能随时设置宽度和高度
119  3>inline:行内类型，宽高取决于内容尺寸
120  4>inline-block:行内-块级类型
121  
122  九、CSS属性
123  1.根据继承分类（两类）
124  1>可继承属性
125    父标签的属性值会传递给子标签 - 一般是文字属性
126  2>不可继承属性
127    父标签的属性值不能传递给子 - 一般是区块控制属性
128  2.所有标签可继承
129    visibility,cursor
130  3.内联标签可继承
131    letter-spacing,word-spacing,white-space,line-height,color,font,font-family,font-size,font-style,
132    font-variant,font-weight,text-decoration,text-transform,direction
133  4.块级标签可继承
134    text-indent,text-align
135  5.列表标签可继承
136    list-style,list-style-type,list-style-position,list-style-image
137  6.不可继承
138    display,margin,border,padding,background,
139    height,min-height,max-height,width,min-width,max-width
140    overflow,position,left,right,top,bottom,z-index
141    float,clear
142    table-layout,vertical-align
143    page-break-after,page-bread-before
144    unicode-bidi
145  
146  十、盒子模型
147  1.网页上每个标签都是一个盒子
148  2.每个盒子有四个属性
149  1>内容（content）
150      属性：
151      height
152      width
153      max-height
154      max-width
155      min-height
156      min-width
157  2>填充（padding，内边距）
158      属性
159      padding
160      padding-bottom
161      padding-left
162      padding-right
163      padding-top
164  3>边框（border，盒子本身）
165      属性
166      border-width
167      border-style
168      border-color
169      border-radius
170  4>边界（margin，外边距）
171      属性
172      margin
173      margin-bottom
174      margin-left
175      margin-right
176      margin-top
177  
178  十一、CSS布局
179  1.默认情况下，所有的网页都在标准流布局中
180  1>从上到下，从左到右
181  2.脱离标准流的方法
182  1>float属性
183  2>position属性和left，right，top，bottom属性
184  3.position属性值
185      1>absolute:生成绝对定位元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过eft，right，top，
186                 bottom属性进行规定
187      2>fixed:生成绝对定位元素，相对于浏览器窗口进行定位。元素的位置通过eft，right，top，bottom属性进行规定
188      3>relative:生成相对定位元素，相对于其正常位置进行定位
189      4>static:默认值，没有定位，元素出现在正常流中
190      5>inherit:规定应该从父元素继承position属性的值
191  4.子绝父相：子元素相对于父元素进行定位
192  */
193 
194 - (void)viewDidLoad {
195     [super viewDidLoad];
196     self.view.backgroundColor = [UIColor cyanColor];
197     
198     [self loadWebView];
199 }
200 
201 - (void)loadWebView
202 {
203     //伸缩页面填充整个webView
204     self.webView.scalesPageToFit = YES;
205 
206     //NSURL *url = [NSURL URLWithString:@"http://localhost:8080/MJServer/"];
207     NSURL *url = [[NSBundle mainBundle] URLForResource:@"01-学前须知" withExtension:@"pptx"];
208     NSURLRequest *request = [NSURLRequest requestWithURL:url];
209     [self.webView loadRequest:request];
210 }
211 
212 @end

二、JavaScript和UIWebView代理

  1 //
  2 //  ViewController.m
  3 //  IOS_0219_网页开发2
  4 //
  5 //  Created by ma c on 16/2/19.
  6 //  Copyright © 2016年 博文科技. All rights reserved.
  7 //
  8 
  9 #import "ViewController.h"
 10 
 11 @interface ViewController ()<UIWebViewDelegate>
 12 
 13 @property (weak, nonatomic) IBOutlet UIBarButtonItem *forwardItem;
 14 @property (weak, nonatomic) IBOutlet UIBarButtonItem *rewindItem;
 15 
 16 - (IBAction)rewind:(id)sender;
 17 - (IBAction)forward:(id)sender;
 18 
 19 @property (nonatomic, weak) UIWebView *webView;
 20 
 21 @end
 22 /*
 23  一、JavaScript
 24  1.定义：JavaScript是一门广泛应用于浏览器客户端的脚本语言
 25  1>Netspace公司设计，当时与sun公司合作，所以名字有点像java
 26  2>业内一般称JS
 27  
 28  2.JS常见用途
 29  HTML DOM操作（节点操作，比如添加，修改，删除节点）
 30  给HTML网页增加动态功能，比如动画
 31  事件处理：监听鼠标点击，鼠标滑动，键盘输入
 32  
 33  3.JS的书写形式
 34  1>常见书写形式（2种）
 35    a.页内JS：在当前网页的script标签中写
 36      <script type="text/javascript">
 37      </script>
 38    b.页外JS
 39      <script src="index.js"></script>
 40  
 41  4.JS基本操作(CRUD)
 42  1>C(create)
 43      var div = document.createElement('div');
 44      document.body.appendChild(div);
 45  2>R(read)
 46      var div = document.getElementById('logo');
 47      var div = document.getElementsByTagName('div')[0];
 48      var div = document.getElementsByClassName('logo')[0];
 49  3>U(update)
 50      var img = document.getElementById('logo');
 51      img.src = 'images/01.png';
 52  4>D(delete)
 53      var img = document.getElementById('logo');
 54      img.parentNode.removeChild(img);
 55  
 56  5.事件绑定
 57  1>推荐做法
 58      var button = document.getElementById('login')
 59      button.onclick = function{
 60      点击按钮想实现的事
 61      }
 62  2>直接写在标签内部
 63      <button onclick="var age = 10;alert(age);">登录</button>
 64  3>不常用
 65      function login{
 66         点击按钮想实现的事
 67      }
 68      var button = document.getElementById('login')
 69      button.onclick = login；
 70  
 71  二、jQuery
 72  1.通过选择器查找元素
 73      1>$('选择器') - jQuery支持大部分的CSS选择器
 74  
 75  2.属性操作
 76      1>获得属性：$('选择器').attr('属性名');
 77      2>设置属性：$('选择器').attr('属性名','属性值');
 78      
 79      3.显示和隐藏
 80      1>显示：$('选择器').show();
 81      2>隐藏：$('选择器').hide();
 82      3>显示和隐藏来回切换：$('选择器').toggle();
 83  
 84  4.事件绑定
 85      1>点击事件
 86      a.
 87      $('选择器').click(function(){
 88         //实现点击按钮所要做的事
 89      })
 90      
 91      b.
 92      function login{
 93      点击按钮想实现的事
 94      }
 95      $('选择器').click(login)
 96  
 97  三、参考手册
 98  1.www.w3school.com
 99  2.http://www.w3school.com.cn/jquery/jquery_reference.asp
100  3.http://jquery.cuishifeng.cn
101  4.http://www.jb51.net/shouce/jquery1.82/
102  
103  四、HTML5的框架
104  1.概念
105      有了HTML5的框架，编写简易的几行代码，就能实现非常漂亮的手机界面
106      HTML5框架封装了大量的DOM节点操作，封装了大量的CSS样式
107  2.常见的HTML5框架
108      1>PhoneGap
109      2>jQuery Mobile
110      3>sencha-touch
111  
112  */
113 
114 @implementation ViewController
115 
116 - (void)viewDidLoad {
117     [super viewDidLoad];
118     
119     [self createWebView];
120 }
121 
122 - (void)createWebView
123 {
124     //1.创建webView
125     UIWebView *webview  = [[UIWebView alloc] init];
126     webview.scalesPageToFit = YES;
127     CGRect frame = self.view.frame;
128     //frame.origin.y = 64;
129     webview.frame = frame;
130     [self.view addSubview:webview];
131     
132     //2.加载请求
133     NSURL *url = [[NSBundle mainBundle] URLForResource:@"web" withExtension:@"xml"];
134     NSURLRequest *request = [NSURLRequest requestWithURL:url];
135     [webview loadRequest:request];
136     
137     //3.设置代理
138     webview.delegate = self;
139     
140     self.webView = webview;
141 }
142 
143 #pragma mark - UIWebViewDelegate
144 //网页加载完毕
145 - (void)webViewDidFinishLoad:(UIWebView *)webView
146 {
147     self.rewindItem.enabled = [webView canGoBack];
148     
149     NSLog(@"webViewDidFinishLoad");
150 }
151 
152 - (void)webViewDidStartLoad:(UIWebView *)webView
153 {
154     NSLog(@"webViewDidStartLoad");
155 }
156 
157 - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
158 {
159     NSLog(@"didFailLoadWithError");
160 }
161 //一般用来拦截webView发出的所有请求（加载新的网页）
162 //每当webView即将发送一个请求之前，会先调用这个方法
163 //YES允许发送这个请求
164 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
165 {
166     /*
167      URL格式：协议头：//主机名/路径
168      request.URL.path:获得的是主机名后面的路径
169      request.URL.absoluteString:获得的是一个完整的URL字符串
170      */
171     return YES;
172 }
173 
174 - (IBAction)rewind:(id)sender {
175     [self.webView goBack];
176 }
177 - (IBAction)forward:(id)sender {
178     [self.webView goForward];
179 }
180 @end

 三、OC调用JS代码(利用UIWebView)

 1 //
 2 //  ViewController.m
 3 //  IOS_0229_利用webView加载JS代码
 4 //
 5 //  Created by ma c on 16/2/19.
 6 //  Copyright © 2016年 博文科技. All rights reserved.
 7 //
 8 
 9 #import "ViewController.h"
10 
11 @interface ViewController ()<UIWebViewDelegate>
12 
13 @property (nonatomic, weak) UIActivityIndicatorView *loadingView;
14 
15 @end
16 
17 @implementation ViewController
18 
19 - (void)viewDidLoad {
20     [super viewDidLoad];
21     [self createWebView];
22 }
23 
24 - (void)createWebView
25 {
26     //1.创建webView
27     UIWebView *webView = [[UIWebView alloc] init];
28     webView.frame = self.view.frame;
29     webView.delegate = self;
30     //隐藏scrollView
31     webView.scrollView.hidden = YES;
32     [self.view addSubview:webView];
33     webView.scalesPageToFit = YES;
34     
35     //2.加载网页
36     NSURL *url = [NSURL URLWithString:@"http://m.dianping.com/tuan/deal/5501525"];
37     NSURLRequest *request = [NSURLRequest requestWithURL:url];
38     [webView loadRequest:request];
39     
40     //3.创建
41     UIActivityIndicatorView *loadingView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
42     loadingView.center = self.view.center;
43     [loadingView startAnimating];
44     [self.view addSubview:loadingView];
45     self.loadingView = loadingView;
46 }
47 //OC->JS（OC调用JS）
48 #pragma mark - UIWebViewDelegate
49 - (void)webViewDidFinishLoad:(UIWebView *)webView
50 {
51     //执行JS代码，将大众点评中多余的节点删除掉
52     
53     //拿到所有节点内容
54     NSString *html = [webView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"];
55     NSLog(@"%@",html);
56     
57     NSMutableString *js1 = [NSMutableString string];
58     
59     // 0.删除顶部的导航条
60     [js1 appendString:@"var header = document.getElementsByTagName('header')[0];"];
61     [js1 appendString:@"header.parentNode.removeChild(header);"];
62     
63     //1.删除底部链接
64     [js1 appendString:@"var footer = document.getElementsByTagName('footer')[0];"];
65     [js1 appendString:@"footer.parentNode.removeChild(footer);"];
66 //    NSLog(@"%@",js1);
67     [webView stringByEvaluatingJavaScriptFromString:js1];
68     
69     dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.25 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
70         NSMutableString *js2 = [NSMutableString string];
71         //2.删除浮动的广告
72         [js2 appendString:@"var list = document.body.childNodes;"];
73         [js2 appendString:@"var len = list.length;"];
74         [js2 appendString:@"var banner = list[len-1];"];
75         [js2 appendString:@"banner.parentNode.removeChild(banner);"];
76         [webView stringByEvaluatingJavaScriptFromString:js2];
77         
78         //显示scrollView
79         webView.scrollView.hidden = NO;
80         //删除等待指示器
81         [self.loadingView removeFromSuperview];
82     });
83 }
84 
85 @end

 四、JS调用OC代码 

一、以前使用js调用object-c的方法

1.在UIWebview中载入的js代码中通过改变document.locations=“”, window.location.href=""

2.然后回调

UIWebview的-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType函数，

通过截取NSURLRequest解析js中传递过来的参数，再根据参数来选择早已定义好的方法。

 index.html

 1 <!--//  Created by bowen on 15-3-19.-->  
 2 <!--//  Copyright (c) 2014年 bowen. All rights reserved.-->
 3   
 4 <!DOCTYPE html>  
 5   
 6 <html>
 7 <head lang="en">
 8     <meta charset="utf-8">
 9     <title></title>
10 </head>
11 
12 <body>
13     <p></p>
14     <div>
15         <button onclick="fn_open_camera();">拍照</button>
16     </div>
17     
18     <p></p>
19     <div>
20         <button onclick="fn_call();">打电话</button>
21     </div>
22 <script>
23     
24 function fn_call(){
25     //调用OC中的call方法
26     window.location.href = 'bw://call';
27 }
28 
29 function fn_open_camera(){
30     //调用OC中的openCamera方法
31     window.location.href = 'bw://camera';
32 }
33 
34 </script>
35 </body>
36 </html>
ViewController.m
 1 //
 2 //  ViewController.m
 3 //  JSCallOC
 4 //
 5 //  Created by bowen on 15/11/17.
 6 //  Copyright © 2015年 bowen. All rights reserved.
 7 //
 8 
 9 #import "ViewController.h"
10 
11 @interface ViewController ()<UIWebViewDelegate>
12 
13 @end
14 
15 @implementation ViewController
16 
17 - (void)viewDidLoad {
18     [super viewDidLoad];
19     [self createWebView];
20 }
21 
22 - (void)createWebView
23 {
24     //1.创建WebView
25     UIWebView *webView = [[UIWebView alloc] init];
26     webView.frame = self.view.frame;
27     webView.delegate = self;
28     [self.view addSubview:webView];
29     
30     //2.加载网页
31     NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
32     NSURLRequest *request = [NSURLRequest requestWithURL:url];
33     [webView loadRequest:request];
34 }
35 
36 #pragma mark - UIWebViewDelegate
37 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
38 {
39     NSString *url = request.URL.absoluteString;
40     NSRange range = [url rangeOfString:@"bw://"];
41     NSUInteger loc = range.location;
42     if (loc != NSNotFound) {
43         //方法名
44         NSString *method = [url substringFromIndex:loc + range.length];
45         //转成SEL
46         SEL sel = NSSelectorFromString(method);
47         [self performSelector:sel withObject:nil];
48     }
49     return YES;
50 }
51 //打电话
52 - (void)call
53 {
54     NSLog(@"call");
55 }
56 //照相
57 - (void)camera
58 {
59     NSLog(@"camera");
60 }
61 
62 @end

二、利用javascriptCore.framework库

废话不多说，现在看看如何在UIWebView的javascript中调用oc的方法

首先在建立一个UIWebView，代码如下：

[objc] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. //  
  2. //  webview.m  
  3. //  login  
  4. //  
  5. //  Created by wangdan on 15-3-19.  
  6. //  Copyright (c) 2015年 wangdan. All rights reserved.  
  7. //  
  8.   
  9. #import "webview.h"  
  10. #import <JavaScriptCore/JavaScriptCore.h>  
  11.   
  12. @implementation webview  
  13.   
  14.   
  15. -(id)initWithFrame:(CGRect)frame  
  16. {  
  17.     self=[super initWithFrame:frame];  
  18.       
  19.     if( self ){  
  20.         self.webview=[[UIWebView alloc]initWithFrame:CGRectMake(0, 310, self.bounds.size.width, 300)];  
  21.         self.webview.backgroundColor=[UIColor lightGrayColor];  
  22.         NSString *htmlPath=[[NSBundle mainBundle] resourcePath];  
  23.         htmlPath=[htmlPath stringByAppendingPathComponent:@"html/index.html"];  
  24.         NSURL *localURL=[[NSURL alloc]initFileURLWithPath:htmlPath];  
  25.         [self.webview loadRequest:[NSURLRequest requestWithURL:localURL]];  
  26.         [self addSubview:self.webview];  
  27.   
  28.          JSContext *context = [self.webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];  
  29.          context[@"log"] = ^() {  
  30.   
  31.             NSLog(@"+++++++Begin Log+++++++");  
  32.             NSArray *args = [JSContext currentArguments];  
  33.   
  34.             for (JSValue *jsVal in args) {  
  35.                 NSLog(@"%@", jsVal);  
  36.             }  
  37.   
  38.             JSValue *this = [JSContext currentThis];  
  39.             NSLog(@"this: %@",this);  
  40.             NSLog(@"-------End Log-------");  
  41.   
  42.         };  
  43.           
  44.   
  45. //        [context evaluateScript:@"log('ider', [7, 21], { hello:'world', js:100 });"];  
  46.   
  47.           
  48.     }  
  49.     return self;  
  50. }  
  51.   
  52.   
  53. @end  

(1)在上述代码中，使用javascriptCore.framework，首先使用UIWebview加载一个静态网页，并

使用

JSContext *context = [self.webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

获取该UIWebview的javascript执行环境。

(2)在该javascript执行环境中，定义一个js函数，注意关键点来了

这个函数的执行体完全是 objective-c代码写的，也就是下面：

[objc] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. context[@"jakilllog"] = ^() {  
  2.   
  3.         NSLog(@"Begin Log");  
  4.         NSArray *args = [JSContext currentArguments];  
  5.   
  6.         for (JSValue *jsVal in args) {  
  7.             NSLog(@"%@", jsVal);  
  8.         }  
  9.   
  10.         JSValue *this = [JSContext currentThis];  
  11.         NSLog(@"-------End Log-------");  
  12.   
  13.     };  
[objc] view plain copy
 在CODE上查看代码片派生到我的代码片
  1.    
[objc] view plain copy
 在CODE上查看代码片派生到我的代码片
  1.    

（3）试想一下，在定义的webview中，如果使用js执行log这个函数，那么会不会调用上面oc中block段代码呢，答案是肯定的！

下面看看UIWebView 中所加载的 html及其js代码是如何写的

（4）index.html代码

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <!--//  Created by wangdan on 15-3-19.-->  
  2. <!--//  Copyright (c) 2014年 wangdan. All rights reserved.-->  
  3.   
  4. <!DOCTYPE html>  
  5.   
  6. <html lang="en">  
  7.       
  8.     <head>  
  9.           
  10.          <meta charset="utf-8">  
  11.               
  12.           <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  13.             <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      
  14.                   
  15.             <meta name="description" content="">  
  16.                       
  17.             <meta name="viewport" content="width=device-width; initial-scale=1.0">  
  18.              <script type="text/javascript" src="index.js"></script>             
  19.         
  20.                           
  21.       </head>  
  22.       
  23.     <button id="hallo" onclick="buttonClick()"> 点击button</button>  
  24.   
  25.     </body>  
  26.       
  27. </html>  






[html] view plain copy


 在CODE上查看代码片派生到我的代码片




    

  1. 上面html定义了一个button，然后引用index.js，点击button的响应函数为buttonClick()  
    2. 







[html] view plain copy


 在CODE上查看代码片派生到我的代码片




    

  1. 该函数在index.js中定义，如下  
    2. 







[html] view plain copy


 在CODE上查看代码片派生到我的代码片




    

  1. function buttonClick()  
    2. 

  2. {  
    3. 

  3.     jakilllog("hello world");  
    4. 

  4. }  
    5. 






意思是点击这个button，就调用jakilllog()函数，jakilllog()函数显然是我们在oc中实现的一个block段，


就是上述绿色部分的block段。



点击button会执行么？答案是肯定的。


下面上图



下图是执行的结果






点击html中的button，能够执行oc中的代码


说明直接从js调用oc的意图达到。



最近有很多朋友问我索要demo那么我把demo的地址上传到csdn


大家下载下来就很方便了。


demo地址


转自：http://blog.csdn.net/j_akill/article/details/44463301



        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/oc-bowen/p/5198692.html