一、网页基础

  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>html\htm
  27. 2>pdf\doc\ppt\txt
  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>
  1. 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,代码如下:

  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. #import "webview.h"
  9. #import <JavaScriptCore/JavaScriptCore.h>
  10. @implementation webview
  11. -(id)initWithFrame:(CGRect)frame
  12. {
  13. self=[super initWithFrame:frame];
  14. if( self ){
  15. self.webview=[[UIWebView alloc]initWithFrame:CGRectMake(0, 310, self.bounds.size.width, 300)];
  16. self.webview.backgroundColor=[UIColor lightGrayColor];
  17. NSString *htmlPath=[[NSBundle mainBundle] resourcePath];
  18. htmlPath=[htmlPath stringByAppendingPathComponent:@"html/index.html"];
  19. NSURL *localURL=[[NSURL alloc]initFileURLWithPath:htmlPath];
  20. [self.webview loadRequest:[NSURLRequest requestWithURL:localURL]];
  21. [self addSubview:self.webview];
  22. JSContext *context = [self.webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
  23. context[@"log"] = ^() {
  24. NSLog(@"+++++++Begin Log+++++++");
  25. NSArray *args = [JSContext currentArguments];
  26. for (JSValue *jsVal in args) {
  27. NSLog(@"%@", jsVal);
  28. }
  29. JSValue *this = [JSContext currentThis];
  30. NSLog(@"this: %@",this);
  31. NSLog(@"-------End Log-------");
  32. };
  33. //        [context evaluateScript:@"log('ider', [7, 21], { hello:'world', js:100 });"];
  34. }
  35. return self;
  36. }
  37. @end

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

使用

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

获取该UIWebview的javascript执行环境。

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

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

  1. context[@"jakilllog"] = ^() {
  2. NSLog(@"Begin Log");
  3. NSArray *args = [JSContext currentArguments];
  4. for (JSValue *jsVal in args) {
  5. NSLog(@"%@", jsVal);
  6. }
  7. JSValue *this = [JSContext currentThis];
  8. NSLog(@"-------End Log-------");
  9. };

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

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

(4)index.html代码

  1. <!--//  Created by wangdan on 15-3-19.-->
  2. <!--//  Copyright (c) 2014年 wangdan. All rights reserved.-->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6. <meta charset="utf-8">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <meta name="description" content="">
  10. <meta name="viewport" content="width=device-width; initial-scale=1.0">
  11. <script type="text/javascript" src="index.js"></script>
  12. </head>
  13. <button id="hallo" onclick="buttonClick()"> 点击button</button>
  14. </body>
  15. </html>
  1.  
  1. 上面html定义了一个button,然后引用index.js,点击button的响应函数为buttonClick()
  1. 该函数在index.js中定义,如下
  1. function buttonClick()
  2. {
  3. jakilllog("hello world");
  4. }
  1.  

意思是点击这个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

IOS-网络(网页开发-UIWebView,HTML,CSS,JavaScript,OC和JS代码互调)的更多相关文章

  1. iOS WKWebview 网页开发适配指南

    iOS WKWebview 网页开发适配指南 微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配.如有问题,可参考文末联系方式,向我们 ...

  2. ios网络学习------4 UIWebView的加载本地数据的三种方式

    ios网络学习------4 UIWebView的加载本地数据的三种方式 分类: IOS2014-06-27 12:56 959人阅读 评论(0) 收藏 举报 UIWebView是IOS内置的浏览器, ...

  3. UIWebView中Html中用JS调用OC方法及OC执行JS代码

    HTML代码: <html> <head> <title>HTML中用JS调用OC方法</title> <meta http-equiv=&quo ...

  4. iOS(UIWebView 和WKWebView)OC与JS交互 之二

    在iOS应用的开发过程中,我们经常会使用到WebView,当我们对WebView进行操作的时候,有时会需要进行源生的操作.那么我记下来就与大家分享一下OC与JS交互. 首先先说第一种方法,并没有牵扯O ...

  5. [iOS Hybrid实践:UIWebView中Html中用JS调用OC方法,OC执行JS代码]

    原理: 1.JS调用OC 每次webview执行跳转时都会被iOS给拦截,执行下面函数获得系统允许. 因此可以根据跳转信息转给系统,执行相应功能,比如打开相册等. // 网页中的每一个请求都会被触发 ...

  6. iOS WKWebview 网页开发适配指南【转】

    微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配.如有问题,可参考文末联系方式,向我们咨询. 背景 WKWebView 是苹果在iO ...

  7. 微信iOS WKWebview 网页开发适配指南

    微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配. 背景 WKWebView 是苹果在iOS 8中引入的新组件,目的是提供一个现代的 ...

  8. (五十九)iOS网络基础之UIWebView简易浏览器实现

    [UIWebView网络浏览器] 通过webView的loadRequest方法可以发送请求显示相应的网站,例如: NSURL *url = [NSURL URLWithString:@"h ...

  9. iOS 混合网页开发 问题

    在利用JavaScriptCore与H5交互时出现异常提示: This application is modifying the autolayout engine from a background ...

随机推荐

  1. 字符串的partition函数

    partition函数 str1='sdga2a34'aa=str1.partition('a') print(aa) """ ('sdg', 'a', '2a34') ...

  2. 网络爬虫Java实现抓取网页内容

    package 抓取网页; import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream; ...

  3. Dictionary 初始化数据

    Dictionary<string, string> dic = new Dictionary<string, string>() {                    { ...

  4. Lua的table库函数insert、remove、concat、sort详细介绍(转载)

    函数列表: table.insert(table,[ pos,] value) table.remove(table[, pos]) table.concat(table[, sep[, i[, j] ...

  5. c++ 跳转语句块

    p170~p172:跳转语句:1.break:对while for switcho有效!2.continue:中断当前迭代,但是循环还要继续.因此对while for有效,对switch无效!3.go ...

  6. Helloworld.JaVa 第一次编程

    package Jc; class Jc1st { public static void main(String[] args) { System.out.println("Hello Wo ...

  7. 20145324 《Java程序设计》第3周学习总结

    20145324 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 1.要产生对象必须先定义类,类是对象的设计图,对象是类的实例,建立实例要用new 2.参数名称与对象数据成员 ...

  8. 20145331 《Java程序设计》第3周学习总结

    20145331 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 认识对象 •对象(Object):存在的具体实体,具有明确的状态和行为 •类(Class):具有相同属性和行 ...

  9. 20145231熊梓宏 《网络对抗》 Bof逆向基础.shellcode注入

    20145231网络对抗<逆向及Bof基础>shellcode注入 实验目的与要求 1.本次实践的对象是一个名为pwn1的linux可执行文件. 2.若该程序正常执行,则main函数会调用 ...

  10. ubuntu 16.04 gtx1060 显卡安装【转】

    本文转载自:https://blog.csdn.net/u010925447/article/details/79754044 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...