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