iOS中UIWebView網(wǎng)頁加載組件的基礎及使用技巧實例
基本用法示例
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
UIWebView * webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 20, ScreenWidth, ScreenHeight-20)];
// 自動隊頁面進行縮放以適應屏幕
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;
//移除滾動后的外邊陰影
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;
}
// 加載失敗,彈出錯誤提示
- (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;
}
以下是關于它的一些使用技巧:
1.讓網(wǎng)頁適應手機屏幕寬度
如果用UIWebView顯示一些pc站的網(wǎng)頁,會發(fā)現(xiàn)網(wǎng)頁會超出屏幕,顯得很不好看,這時可以在webViewDidFinishLoad這個代理里面通過js添加一個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];
}
注意:使用這個方法時要把UIWebView的scalesPageToFit設成NO
webView.scalesPageToFit = NO;
2.為網(wǎng)頁中的圖片添加點擊事件,當點擊圖片時放大查看
思路是給每一個img標簽添加onclick事件,在事件中把img的src屬性封裝成一個特殊的url,然后進行攔截
如果是通過loadHTMLString去加載網(wǎng)頁的話,可以執(zhí)行下面一句進行替換:
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添加一個跟隨網(wǎng)頁滾動的頁頭
UIWebView里包含一個scrollview,可以向scrollview里添加一個頁頭以達到跟隨網(wǎng)頁滾動的效果
CGFloat headerHeight = 36.0f; // 注意:y坐標必須是負數(shù),IPHONE_WIDTH是屏幕寬度 UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, -headerHeight, IPHONE_WIDTH, headerHeight)]; [_webView.scrollView addSubview:_headerView]; // 修改webView的scrollView的contentInset,讓頂部留出一點空間 UIEdgeInsets edgeInset = _webView.scrollView.contentInset; _webView.scrollView.contentInset = UIEdgeInsetsMake(headerView.frameHeight, edgeInset.left, edgeInset.bottom, edgeInset.right);

