WebView的幾種使用方法:
首先:配置Plist文件 可以進行網絡請求
或者:Source Code寫入HTML格式
否則:你懂得~~??
使用StoryBoard拖3個WebView,平分了整個屏幕:
再把背景色設置為紫色。
三個WebView:
@property (strong, nonatomic) IBOutlet UIWebView *webV_1;
@property (strong, nonatomic) IBOutlet UIWebView *webV_2;
@property (strong, nonatomic) IBOutlet UIWebView *webV_3;
獲取本地文件內容(HTML文件)
在“MyCreateFile.html”本地文件,編輯HTML格式的內容:
<html>
<meta charset="UTF-8">
<head lang="en">
<meta charset="UTF-8">
<h1 style='color:blue'>
What's The Fox say?
</h1>
</head>
<br> </br>
<body>
<h1>What's The Fox say?</h1> <!-- 一級標題 -->
<h2>我的HTML標題Lev2</h2>
<h3>我的HTML標題Lev3</h3>
<h4>我的HTML標題Lev4</h4>
<h5>我的HTML標題Lev5</h5>
<h6>我的HTML標題Lev6</h6> <!-- 六級標題 -->
<p>
<p style='color:red'> <!-- 顏色改變 -->
老子的HTML學習第一次
</p>
<p>
勞資的HTML學習第一次 What's The Fox says
勞資HTML學習第一次 勞資HTML學習第一次
勞資HTML學習第一次勞資HTML學習第一次
</p>
<input type="button" value="按鈕">
<input type = "color"> <br/> <!-- <br/>:自動換行 -->
<!-- <br />=<br>...</br> -->
<input type = "text" placeholder="請輸入賬號"> <br/>
<a >百度一下,你就上當
</a>
<form>
<input type='checkbox' name='sex' value='male' selected=selected>程序員
<input type='checkbox' name='sex' value='male' selected=selected>老板 <br/> <!-- checkbox:多選框 -->
<input type='radio' name='sex' value='male' selected=selected>男人
<input type='radio' name='sex' value='female'>女人 <!-- radio:單選框 -->
</form>
</body>
</html>
[self loadLocalHtml];
-(void)loadLocalHtml
{
//1.從本地獲取HTML文件
NSString * path = [[NSBundle mainBundle] pathForResource:@"MyCreateFile" ofType:@"html"];
//2.從文件中獲取HTML字符串
NSString * htmlStr = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
//3.加載在webview中
[self.webV_1 loadHTMLString:htmlStr baseURL:nil];
//4.可以 加載在Label的??富文本??中 (但是只能觀看~??????)
//NSData * data = [htmlStr dataUsingEncoding:NSUTF8StringEncoding]; //Label的字體 大小 并不能影響 html字體的大小
//NSAttributedString * str = [[NSAttributedString alloc] initWithData:data options:@{NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType} documentAttributes:nil error:nil];
//self.htmlLB.attributedText = str;
}
[self.webV_1 loadHTMLString:htmlStr baseURL:nil];
對于“[ loadHTMLString: baseURL: ]”方法,可以替換為:
NSURL * webURL = [NSURL fileURLWithPath:path]; //通過文件路徑字符串獲取URL
NSURLRequest * URLRequest = [NSURLRequest requestWithURL:webURL];//設置請求 提交的相關URL
[self.webV_1 loadRequest:URLRequest]; //提交請求
好處:URL(統一資源定位符~~)不但可以獲取本地文件內容,也可以加載網絡信息。
當然“[ loadHTMLString: baseURL: ]”方法可以加載HTML格式或CSS格式的網絡信息! 之前自己只是將網絡上請求的信息(CSS格式)加載出來了而已!
網上說法:??baseURL如果是一個網絡路徑,就能加載 網絡上的CSS信息了!??但是自己還沒試過。。。。。
希望明白的朋友指點一下~ !
蘋果官方 不推薦用來加載網絡信息:(?? 當然有時候 官方就是屁~)
總結:
1.“<head></head>”部分 只有一個藍色標題。
2.“<br><br/>”效果與“<br/> ”相同 (換行操作)。
3.“程序員”、“老板” 為多選項;“男人”、“女人” 為單選項。
4.點擊“百度一下,你就上當”,進入百度網頁。
※5.WebView的背景色跟UIScrollView一樣(包含了一個UIScrollView屬性),藍色會被內容視圖遮擋。
從服務器加載 HTML頁面
[self loadInternetHtml];
//從服務器加載HTML頁面
-(void)loadInternetHtml
{
//加載服務器HTML頁面的 模式
// NSString *urlStr = [NSString stringWithFormat:@"%@/appservice/getAnnouncementDetail.do?id=%@",O2O_URL,self.idStr];
NSString *urlStr = @"https://www.baidu.com";
NSURL *url = [NSURL URLWithString:urlStr];
NSLog(@"url:%@",url);
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.webV_1 loadRequest:request];
}
使用WebView的delegate方法:
@interface ViewController () <UIWebViewDelegate> // 設置代理
[self useWebViewDelegate];
-(void)useWebViewDelegate
{
self.webV_2.delegate = self; // ??設置代理
self.webV_2.scrollView.bounces = NO;//禁止WebView的彈簧效果
NSString *urlStr = @"https://www.baidu.com";
NSURL *url = [NSURL URLWithString:urlStr];
NSLog(@"url:%@",url);
NSURLRequest * request = [NSURLRequest requestWithURL:url];
[self.webV_2 loadRequest:request];
}
#pragma mark - UIWebView Delegate
- (void)webViewDidStartLoad:(UIWebView *)webView
{ 開始加載時調用的方法
}
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{加載失敗時調用的方法
}
// 禁止webview中的鏈接點擊 (用于 :??過濾 請求條件)
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{ // 頁面準備加載內容時調用,通過返回值來進行判斷是否要加載
if (webView == self.webV_2) { // 是第二個WebView
if(navigationType == UIWebViewNavigationTypeLinkClicked)
{ //判斷點擊的是否為 鏈接
return NO; //返回“NO”,不加載到鏈接的頁面
}else{
return YES;
}
} else { // 其他WebView可以響應 鏈接
return YES;
}
}
加載效果:
第二個WebView每次點擊到響應的類型,都會判斷是否為“鏈接”類型:如果是,不予響應(進入鏈接頁面)。如果點擊的 是鏈接類型,不予響應
-(void)webViewDidFinishLoad:(UIWebView *)webView
{ // 加載完后觸發
if (webView == self.webV_2) { // 是第二個WebView
NSString * fontStr = @"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '50%'";//字體大小
// ………………
[self.webV_2 stringByEvaluatingJavaScriptFromString:fontStr];
}
}
加載效果:
第二個WebView的字體,縮小為原來的50%
JavaScript方式,操作web數據
需要等UIWebView中的頁面加載完成之后去調用。
“ - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;”方法向UIWebView傳遞一段需要執行的JavaScript代碼,最后獲取執行結果。
在 - (void)viewDidLoad { }里面:
[self useJavaScriptWay];
-(void)useJavaScriptWay {
self.webV_3.delegate = self; //設置代理
NSURL *url =[[NSURL alloc] initWithString:@"https://www.baidu.com"];
NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url];
[self.webV_3 loadRequest:request];
}
在頁面加載完成后,去調用WebView的“stringByEvaluatingJavaScriptFromString”方法:
-(void)webViewDidFinishLoad:(UIWebView *)webView
{ // 加載完后觸發
if (webView == self.webV_3) {
[self changeValueForUsingJavaScriptWay];
}
}
-(void)changeValueForUsingJavaScriptWay {
// 獲取當前頁面的URL
NSString *currentURL = [self.webV_3 stringByEvaluatingJavaScriptFromString:@"document.location.href"];
//獲取當前頁面的標題名稱
NSString *title = [self.webV_3 stringByEvaluatingJavaScriptFromString:@"document.title"];
NSLog(@"%URL:@====title:%@",currentURL,title);
// ??交互格式??
//[self.webV_3 stringByEvaluatingJavaScriptFromString:@"方法名(%@)",參數] ];
//插入js代碼
//[self.webV_3 stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"
//"script.type = 'text/javascript';"
//"script.text = \"function myFunction() { "
//"var field = document.getElementsByName('q')[0];"
//"field.value='goyoholBest.com';"
//"document.forms[0].submit();"
//"}\";"
//"document.getElementsByTagName('head')[0].appendChild(script);"];
//給網頁增加utf-8編碼
//[self.webV_3 stringByEvaluatingJavaScriptFromString:
//@"var tagHead =document.documentElement.firstChild;"
//"var tagMeta = document.createElement(\"meta\");"
//"tagMeta.setAttribute(\"http-equiv\", \"Content-Type\");"
//"tagMeta.setAttribute(\"content\", \"text/html; charset=utf-8\");"
//"var tagHeadAdd = tagHead.appendChild(tagMeta);"];
//給網頁增加css樣式
//[self.webV_3 stringByEvaluatingJavaScriptFromString:
//@"var tagHead =document.documentElement.firstChild;"
//"var tagStyle = document.createElement(\"style\");"
//"tagStyle.setAttribute(\"type\", \"text/css\");"
//"tagStyle.appendChild(document.createTextNode(\"BODY{padding: 20pt 15pt}\"));"
//"var tagHeadAdd = tagHead.appendChild(tagStyle);"];
//攔截網頁圖片 并修改圖片大小
[self.webV_3 stringByEvaluatingJavaScriptFromString:
@"var script = document.createElement('script');"
"script.type = 'text/javascript';"
"script.text = \"function ResizeImages() { "
"var myimg,oldwidth;"
"var maxwidth=50;" //縮放系數
"for(i=0;i <document.images.length;i++){"
"myimg = document.images[i];"
"if(myimg.width > maxwidth){"
"oldwidth = myimg.width;"
"myimg.width = maxwidth;"
"myimg.height = myimg.height * (maxwidth/oldwidth);"
"}"
"}"
"}\";"
"document.getElementsByTagName('head')[0].appendChild(script);"];
[self.webV_3 stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
}
加載的效果:圖片被縮小 及 進入一個頁面打印其URL及title信息
2016-12-26 01:39:52.008 WebViewUse-Demo[3221:164983] https://www.baidu.com/====百度一下
2016-12-26 01:39:58.571 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fnid%253D3286129817483816749%2526n_type%253D1%2526p_from%253D2%2522%252C%2522title%2522%253A%2522%25E7%2588%25B1%25E7%25BE%258E%25E5%25B0%25B1%25E8%25A6%2581%25E7%2598%25A6%25E7%2598%25A6%25E7%2598%25A6%2522%257D%257D====百度一下
2016-12-26 01:39:59.196 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fnid%253D3286129817483816749%2526n_type%253D1%2526p_from%253D2%2522%252C%2522title%2522%253A%2522%25E7%2588%25B1%25E7%25BE%258E%25E5%25B0%25B1%25E8%25A6%2581%25E7%2598%25A6%25E7%2598%25A6%25E7%2598%25A6%2522%257D%257D====百度一下
2016-12-26 01:40:11.736 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fdsp%253Dwise%2526nid%253D3267967319825678069%2526n_type%253D1%2526p_from%253D3%2522%257D%257D====百度一下
2016-12-26 01:40:12.039 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fdsp%253Dwise%2526nid%253D3267967319825678069%2526n_type%253D1%2526p_from%253D3%2522%257D%257D====百度一下
2016-12-26 01:41:11.831 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fnid%253D3286129817483816749%2526n_type%253D1%2526p_from%253D2%2522%252C%2522title%2522%253A%2522%25E7%2588%25B1%25E7%25BE%258E%25E5%25B0%25B1%25E8%25A6%2581%25E7%2598%25A6%25E7%2598%25A6%25E7%2598%25A6%2522%257D%257D====百度一下
2016-12-26 01:41:12.409 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fnid%253D3286129817483816749%2526n_type%253D1%2526p_from%253D2%2522%252C%2522title%2522%253A%2522%25E7%2588%25B1%25E7%25BE%258E%25E5%25B0%25B1%25E8%25A6%2581%25E7%2598%25A6%25E7%2598%25A6%25E7%2598%25A6%2522%257D%257D====百度一下
2016-12-26 01:41:13.252 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fnid%253D3286129817483816749%2526n_type%253D1%2526p_from%253D2%2522%252C%2522title%2522%253A%2522%25E7%2588%25B1%25E7%25BE%258E%25E5%25B0%25B1%25E8%25A6%2581%25E7%2598%25A6%25E7%2598%25A6%25E7%2598%25A6%2522%257D%257D====百度一下
2016-12-26 01:41:13.599 WebViewUse-Demo[3221:164983] https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fm.baidu.com%252Ffeed%252Fdata%252Flandingpage%253Fnid%253D3286129817483816749%2526n_type%253D1%2526p_from%253D2%2522%252C%2522title%2522%253A%2522%25E7%2588%25B1%25E7%25BE%258E%25E5%25B0%25B1%25E8%25A6%2581%25E7%2598%25A6%25E7%2598%25A6%25E7%2598%25A6%2522%257D%257D====百度一下
我現在看到“百度”,就??????
Tips:
使用較少的方法,也更自由:
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;
其中:data是文件數據,MIMEType是文件類型,textEncodingName是編碼類型,baseURL是素材資源路徑。
屬性和變量:
@property (nonatomic,readonly,retain)UIScrollView *scrollView; // 內置的scrollView
@property (nonatomic,readonly,retain)NSURLRequest *request; // URL請求
@property (nonatomic,readonly,getter=canGoBack)BOOL canGoBack; // 獲取能否返回上一級
@property (nonatomic,readonly,getter=canGoForward)BOOL canGoForward; // 獲取能否跳轉下一級
@property (nonatomic,readonly,getter=isLoading)BOOL loading; // 獲取是否 正在加載數據
@property (nonatomic)UIDataDetectorTypes dataDetectorTypesNS_AVAILABLE_IOS(3_0); // 設置某些數據變為鏈接形式,這個枚舉可以設置如電話號,地址,郵箱等轉化為鏈接
@property (nonatomic)BOOL allowsInlineMediaPlaybackNS_AVAILABLE_IOS(4_0); // 設置是否使用內聯播放器播放視頻
@property (nonatomic)BOOL mediaPlaybackRequiresUserActionNS_AVAILABLE_IOS(4_0); // 設置視頻是否自動播放
@property (nonatomic)BOOL mediaPlaybackAllowsAirPlayNS_AVAILABLE_IOS(5_0); // 設置音頻播放是否支持AirPlay功能
@property (nonatomic)BOOL suppressesIncrementalRenderingNS_AVAILABLE_IOS(6_0); // 設置是否將數據加載如內存后渲染界面
@property (nonatomic)BOOL keyboardDisplayRequiresUserActionNS_AVAILABLE_IOS(6_0); // 設置用戶交互模式
@property (nonatomic)UIWebPaginationMode paginationModeNS_AVAILABLE_IOS(7_0);
此屬性是用來設置一種模式,當網頁大小超出view時,可將網頁設置成以“翻頁”的效果展示,枚舉如下:
typedef NS_ENUM(NSInteger, UIWebPaginationMode) {
UIWebPaginationModeUnpaginated, // 不使用翻頁效果
UIWebPaginationModeLeftToRight, // 將網頁超出部分分頁,從左向右進行翻頁
UIWebPaginationModeTopToBottom, // 將網頁超出部分分頁,從上向下進行翻頁
UIWebPaginationModeBottomToTop, // 將網頁超出部分分頁,從下向上進行翻頁
UIWebPaginationModeRightToLeft // 將網頁超出部分分頁,從右向左進行翻頁
};
@property (nonatomic)CGFloat pageLengthNS_AVAILABLE_IOS(7_0); // 設置每一頁的長度
@property (nonatomic)CGFloat gapBetweenPagesNS_AVAILABLE_IOS(7_0); // 設置每一頁的間距
@property (nonatomic,readonly)NSUInteger pageCountNS_AVAILABLE_IOS(7_0); // 獲取分頁數
- (void)reload; // 重新加載數據
- (void)stopLoading; // 停止加載數據
- (void)goBack; // 返回上一級
- (void)goForward; // 跳轉下一級
暫時就說這么多吧!!之后還會寫一篇JS交互的文章~
也不知道什么時候了~~ ?哈哈????