iOS中UIWebView网页加载组件的基础及使用技巧实例

所属分类: 软件编程 / IOS 阅读数: 1380
收藏 0 赞 0 分享

基本用法示例

- (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);

更多精彩内容其他人还在看

iOS中UIActivityIndicatorView的用法及齿轮等待动画实例

UIActivityIndicatorView活动指示器最常见的用法便是用来制作那个程序中的齿轮转动的等待效果,接下来我们回来简单整理iOS中UIActivityIndicatorView的用法及齿轮等待动画实例:
收藏 0 赞 0 分享

iOS中的UIStepper数值加减器用法指南

UIStepper可以有许多应用场景,比如在购物应用中制作按钮对购买商品的数量进行增或减,下面我们就一起来看看iOS中的UIStepper数值加减器用法指南
收藏 0 赞 0 分享

iOS中UIImagePickerController图片选取器的用法小结

UIImagePickerController平时就是用来做应用中从相册中选取图片功能的,这里我们就来整理一下iOS中UIImagePickerController图片选取器的用法小结,需要的朋友可以参考下
收藏 0 赞 0 分享

iOS中的UITextView文字输入光标使用技巧小结

UITextView在用户体验方面有着十分明显的作用,包括键盘的呼出及文字的选择等,接下来就来整理给出一份iOS中的UITextView文字输入光标使用技巧小结,需要的朋友可以参考下
收藏 0 赞 0 分享

iOS中UIWebView网页加载组件的基础及使用技巧实例

UIWebView是开发中很常用的应用内调用网页浏览的控件,这里整理了一些iOS中UIWebView网页加载组件的基础及使用技巧实例 ,需要的朋友可以参考下
收藏 0 赞 0 分享

IOS CoreAnimation中layer动画闪烁的解决方法

这篇文章主要为大家详细介绍了IOS CoreAnimation中layer动画闪烁的原因,分享了layer动画闪烁的解决方法,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS开发之视图切换

在iOS开发中视图的切换是很频繁的,独立的视图应用在实际开发过程中并不常见,除非你的应用足够简单。在iOS开发中常用的视图切换有三种,今天我们将一一介绍,希望大家能够喜欢。
收藏 0 赞 0 分享

iOS程序开发中设置UITableView的全屏分隔线的方法(不画线)

ableView是app开发中常用到的控件,功能很强大,多用于数据的显示。下面给大家介绍设置UITableView的全屏分隔线的两种方法
收藏 0 赞 0 分享

iOS开发之触摸事件

iOS设备都是可以多点触摸的,是指手指放在iOS设备的屏幕上从屏幕上拖动或抬起。系统当前视图响应触摸事件,若无响应则向上层传递,构成响应者链。触摸事件的函数有4个。
收藏 0 赞 0 分享

iOS开发之tableView点击下拉扩展与内嵌collectionView上传图片效果

这篇文章主要介绍了iOS开发之tableView点击下拉扩展与内嵌collectionView上传图片效果的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多