iOS中UIWebView網(wǎng)頁加載組件的基礎(chǔ)及使用技巧實(shí)例
基本用法示例
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. UIWebView * webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 20, ScreenWidth, ScreenHeight-20)]; // 自動(dòng)隊(duì)頁面進(jìn)行縮放以適應(yīng)屏幕 webView.scalesPageToFit = YES; webView.userInteractionEnabled = YES; webView.opaque = YES; [self.view addSubview:webView]; NSURL * url = [NSURL URLWithString:@"http://www.youku.com"]; NSURLRequest * request = [NSURLRequest requestWithURL:url]; [webView loadRequest:request]; // NSString * myHT = @"優(yōu)酷"; // [webView loadHTMLString:myHT baseURL:url]; /* [webView goBack]; // 返回 [webView goForward]; // 前往 [webView reload]; [webView stopLoading]; */ webView.delegate = self; //移除滾動(dòng)后的外邊陰影 UIScrollView *scrollView = webView.scrollView; for (int i = 0; i < scrollView.subviews.count ; i++) { UIView *view = [scrollView.subviews objectAtIndex:i]; if ([view isKindOfClass:[UIImageView class]]) { view.hidden = YES ; } } } #pragma mark - UIWebViewDelegate - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{ /** * typedef NS_ENUM(NSInteger, UIWebViewNavigationType) { * UIWebViewNavigationTypeLinkClicked, * UIWebViewNavigationTypeFormSubmitted, * UIWebViewNavigationTypeBackForward, * UIWebViewNavigationTypeReload, * UIWebViewNavigationTypeFormResubmitted, * UIWebViewNavigationTypeOther }; */ NSLOG_FUNCTION; return YES; } // 開始加載 - (void)webViewDidStartLoad:(UIWebView *)webView{ NSLOG_FUNCTION; } // 完成加載 - (void)webViewDidFinishLoad:(UIWebView *)webView{ NSLOG_FUNCTION; } // 加載失敗,彈出錯(cuò)誤提示 - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{ UIAlertView *alterview = [[UIAlertView alloc] initWithTitle:@"" message:[error localizedDescription] delegate:nil cancelButtonTitle:nil otherButtonTitles:@"OK", nil]; [alterview show]; [alterview release]; NSLOG_FUNCTION; }
以下是關(guān)于它的一些使用技巧:
1.讓網(wǎng)頁適應(yīng)手機(jī)屏幕寬度
如果用UIWebView顯示一些pc站的網(wǎng)頁,會(huì)發(fā)現(xiàn)網(wǎng)頁會(huì)超出屏幕,顯得很不好看,這時(shí)可以在webViewDidFinishLoad這個(gè)代理里面通過js添加一個(gè)meta:
- (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *meta = [NSString stringWithFormat:@"document.getElementsByName(\"viewport\")[0].content = \"width=%f, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\"", IPHONE_WIDTH]; [webView stringByEvaluatingJavaScriptFromString:meta]; }
注意:使用這個(gè)方法時(shí)要把UIWebView的scalesPageToFit設(shè)成NO
webView.scalesPageToFit = NO;
2.為網(wǎng)頁中的圖片添加點(diǎn)擊事件,當(dāng)點(diǎn)擊圖片時(shí)放大查看
思路是給每一個(gè)img標(biāo)簽添加onclick事件,在事件中把img的src屬性封裝成一個(gè)特殊的url,然后進(jìn)行攔截
如果是通過loadHTMLString去加載網(wǎng)頁的話,可以執(zhí)行下面一句進(jìn)行替換:
html = [html stringByReplacingOccurrencesOfString:@"<img " withString:@"<img onclick=\"window.location.href=('http://src.'+this.src);\" "];
如果是通過loadRequest,那就要再webViewDidFinishLoad中執(zhí)行以下JS:
NSString *js = @"var imgs = document.getElementsByTagName(\"img\");" "for(var i=0;i<imgs.length;i++){" " var img = imgs[i];" " img.onclick=function(){window.location.href=('http://src.'+this.src);}" "}"; [webView stringByEvaluatingJavaScriptFromString:js];
然后通過webview的代理方法去攔截,拿到圖片的url,之后就可以做各種處理了
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSString *url = request.URL.absoluteString; if ([url hasPrefix:@"http://src."]) { url = [url stringByReplacingOccurrencesOfString:@"http://src." withString:@""]; // Do something.. return NO; } return YES; }
3.為UIWebView添加一個(gè)跟隨網(wǎng)頁滾動(dòng)的頁頭
UIWebView里包含一個(gè)scrollview,可以向scrollview里添加一個(gè)頁頭以達(dá)到跟隨網(wǎng)頁滾動(dòng)的效果
CGFloat headerHeight = 36.0f; // 注意:y坐標(biāo)必須是負(fù)數(shù),IPHONE_WIDTH是屏幕寬度 UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, -headerHeight, IPHONE_WIDTH, headerHeight)]; [_webView.scrollView addSubview:_headerView]; // 修改webView的scrollView的contentInset,讓頂部留出一點(diǎn)空間 UIEdgeInsets edgeInset = _webView.scrollView.contentInset; _webView.scrollView.contentInset = UIEdgeInsetsMake(headerView.frameHeight, edgeInset.left, edgeInset.bottom, edgeInset.right);
- Android使用原生組件WebView加載網(wǎng)頁和數(shù)據(jù)的方法
- Android WebView組件用法詳解
- android WebView組件使用總結(jié)
- Android開發(fā)之WebView組件的使用解析
- 微信小程序webview實(shí)現(xiàn)長(zhǎng)按點(diǎn)擊識(shí)別二維碼功能示例
- android實(shí)現(xiàn)用戶體驗(yàn)超棒的微信WebView進(jìn)度條
- 微信小程序webview組件交互,內(nèi)聯(lián)h5頁面并網(wǎng)頁實(shí)現(xiàn)微信支付實(shí)現(xiàn)解析
相關(guān)文章
詳解IOS圖層轉(zhuǎn)場(chǎng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了IOS圖層轉(zhuǎn)場(chǎng)動(dòng)畫, CATransition類實(shí)現(xiàn)層的轉(zhuǎn)場(chǎng)動(dòng)畫,能夠?yàn)閷犹峁┮瞥銎聊缓鸵迫肫聊坏膭?dòng)畫效果,感興趣的小伙伴們可以參考一下2016-02-02iOS自定義日歷控件的簡(jiǎn)單實(shí)現(xiàn)過程
這篇文章主要為大家詳細(xì)介紹了iOS自定義日歷控件的簡(jiǎn)單實(shí)現(xiàn)過程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09iOS實(shí)現(xiàn)一個(gè)簡(jiǎn)易日歷代碼
本篇文章主要介紹了iOS實(shí)現(xiàn)一個(gè)簡(jiǎn)易日歷代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03iOS 9 Core Spotlight搜索實(shí)例代碼
本文主要講解 iOS 9 Core Spotlight,在 IOS 開發(fā)的時(shí)候有時(shí)候會(huì)用到搜索功能,這里給大家一個(gè)實(shí)例作為參考,有需要的小伙伴可以參考下2016-07-07