IOS-網絡（網頁開發-UIWebView，HTML，CSS，JavaScript，OC和JS代碼互調）

時間 2019-11-30

標籤 ios 網絡網頁開發 uiwebview html css javascript 代碼互調欄目 iOS 简体版

原文原文鏈接

1、網頁基礎javascript

  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  1、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  2、網頁的組成
 31  1.HTML（網頁的具體內容和結構）
 32  2.CSS（網頁的樣式，美化網頁最重要的一塊）
 33  3.JavaScript（網頁的交互效果，好比對用戶鼠標事件作出響應）
 34  4.學習資料：http://www.w3school.com.cn/
 35  
 36  3、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  4、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  5、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  6、選擇器優先級
 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  7、HTML標籤類型(三大類)
109  1>塊級標籤：獨佔一行的標籤
110    塊級元素水平居中：設置本身的margin：0px auto
111  2>行內標籤：多個行內標籤能顯示在一行
112    非塊級元素水平居中：設置父類標籤，text-align：center
113  3>行內-塊級標籤
114  
115  8、修改標籤的顯示類型
116  1.CSS中有個display屬性，能修改標籤的顯示類型
117  1>none:隱藏標籤
118  2>block:塊級類型，能隨時設置寬度和高度
119  3>inline:行內類型，寬高取決於內容尺寸
120  4>inline-block:行內-塊級類型
121  
122  9、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  10、盒子模型
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  11、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

2、JavaScript和UIWebView代理css

  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  1、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  2、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  3、參考手冊
 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  4、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

3、OC調用JS代碼(利用UIWebView)html

 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

4、JS調用OC代碼 java

1、之前使用js調用object-c的方法

1.在UIWebview中載入的js代碼中經過改變document.locations=「」, window.location.href=""jquery

2.而後回調web

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

經過截取NSURLRequest解析js中傳遞過來的參數，再根據參數來選擇早已定義好的方法。chrome

index.htmlxcode

 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

2、利用javascriptCore.framework庫瀏覽器

廢話很少說，如今看看如何在UIWebView的javascript中調用oc的方法

首先在創建一個UIWebView，代碼以下：

[objc] view plain copy

//
// 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