一、网页基础
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>
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,代码如下:
- //
- // webview.m
- // login
- //
- // Created by wangdan on 15-3-19.
- // Copyright (c) 2015年 wangdan. All rights reserved.
- //
- #import "webview.h"
- #import <JavaScriptCore/JavaScriptCore.h>
- @implementation webview
- -(id)initWithFrame:(CGRect)frame
- {
- self=[super initWithFrame:frame];
- if( self ){
- self.webview=[[UIWebView alloc]initWithFrame:CGRectMake(0, 310, self.bounds.size.width, 300)];
- self.webview.backgroundColor=[UIColor lightGrayColor];
- NSString *htmlPath=[[NSBundle mainBundle] resourcePath];
- htmlPath=[htmlPath stringByAppendingPathComponent:@"html/index.html"];
- NSURL *localURL=[[NSURL alloc]initFileURLWithPath:htmlPath];
- [self.webview loadRequest:[NSURLRequest requestWithURL:localURL]];
- [self addSubview:self.webview];
- JSContext *context = [self.webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
- context[@"log"] = ^() {
- NSLog(@"+++++++Begin Log+++++++");
- NSArray *args = [JSContext currentArguments];
- for (JSValue *jsVal in args) {
- NSLog(@"%@", jsVal);
- }
- JSValue *this = [JSContext currentThis];
- NSLog(@"this: %@",this);
- NSLog(@"-------End Log-------");
- };
- // [context evaluateScript:@"log('ider', [7, 21], { hello:'world', js:100 });"];
- }
- return self;
- }
- @end
(1)在上述代码中,使用javascriptCore.framework,首先使用UIWebview加载一个静态网页,并
使用
JSContext *context = [self.webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
获取该UIWebview的javascript执行环境。
(2)在该javascript执行环境中,定义一个js函数,注意关键点来了
这个函数的执行体完全是 objective-c代码写的,也就是下面:
- context[@"jakilllog"] = ^() {
- NSLog(@"Begin Log");
- NSArray *args = [JSContext currentArguments];
- for (JSValue *jsVal in args) {
- NSLog(@"%@", jsVal);
- }
- JSValue *this = [JSContext currentThis];
- NSLog(@"-------End Log-------");
- };
(3)试想一下,在定义的webview中,如果使用js执行log这个函数,那么会不会调用上面oc中block段代码呢,答案是肯定的!
下面看看UIWebView 中所加载的 html及其js代码是如何写的
(4)index.html代码
- <!--// Created by wangdan on 15-3-19.-->
- <!--// Copyright (c) 2014年 wangdan. All rights reserved.-->
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="description" content="">
- <meta name="viewport" content="width=device-width; initial-scale=1.0">
- <script type="text/javascript" src="index.js"></script>
- </head>
- <button id="hallo" onclick="buttonClick()"> 点击button</button>
- </body>
- </html>
- 上面html定义了一个button,然后引用index.js,点击button的响应函数为buttonClick()
- 该函数在index.js中定义,如下
- function buttonClick()
- {
- jakilllog("hello world");
- }
意思是点击这个button,就调用jakilllog()函数,jakilllog()函数显然是我们在oc中实现的一个block段,
就是上述绿色部分的block段。
点击button会执行么?答案是肯定的。
下面上图
下图是执行的结果
点击html中的button,能够执行oc中的代码
说明直接从js调用oc的意图达到。
最近有很多朋友问我索要demo那么我把demo的地址上传到csdn
大家下载下来就很方便了。
转自:http://blog.csdn.net/j_akill/article/details/44463301