iOS中UIWebView网页加载组件的基础及使用技巧实例
作者：slientjack
UIWebView是开发中很常用的应用内调用网页浏览的控件,这里整理了一些iOS中UIWebView网页加载组件的基础及使用技巧实例 ,需要的朋友可以参考下
基本用法示例
- (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 = @"优酷";
// [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.让网页适应手机屏幕宽度
如果用UIWebView显示一些pc站的网页，会发现网页会超出屏幕，显得很不好看，这时可以在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.为网页中的图片添加点击事件，当点击图片时放大查看
思路是给每一个img标签添加onclick事件，在事件中把img的src属性封装成一个特殊的url，然后进行拦截
如果是通过loadHTMLString去加载网页的话，可以执行下面一句进行替换：
复制代码 代码如下:
html = [html stringByReplacingOccurrencesOfString:@"<img " withString:@"<img onclick=\"window.location.href=('http://src.'+this.src);\" "];
如果是通过loadRequest，那就要再webViewDidFinishLoad中执行以下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添加一个跟随网页滚动的页头
UIWebView里包含一个scrollview，可以向scrollview里添加一个页头以达到跟随网页滚动的效果
CGFloat headerHeight = 36.0f; // 注意：y坐标必须是负数，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);