iOS中UIWebView網(wǎng)頁加載組件的基礎(chǔ)及使用技巧實例

更新時間：2016年06月01日 09:29:58 作者：slientjack

UIWebView是開發(fā)中很常用的應(yīng)用內(nèi)調(diào)用網(wǎng)頁瀏覽的控件,這里整理了一些iOS中UIWebView網(wǎng)頁加載組件的基礎(chǔ)及使用技巧實例 ,需要的朋友可以參考下

基本用法示例

- (void)viewDidLoad
{
  [super viewDidLoad];
  // Do any additional setup after loading the view.

  UIWebView * webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 20, ScreenWidth, ScreenHeight-20)];
  // 自動隊頁面進行縮放以適應(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;

  //移除滾動后的外邊陰影
  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;

}

以下是關(guān)于它的一些使用技巧：

1.讓網(wǎng)頁適應(yī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設(shè)成NO

webView.scalesPageToFit = NO;

2.為網(wǎng)頁中的圖片添加點擊事件，當(dāng)點擊圖片時放大查看

思路是給每一個img標(biāo)簽添加onclick事件，在事件中把img的src屬性封裝成一個特殊的url，然后進行攔截

如果是通過loadHTMLString去加載網(wǎng)頁的話，可以執(zhí)行下面一句進行替換：

復(fù)制代碼代碼如下:

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坐標(biāo)必須是負(fù)數(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);

您可能感興趣的文章: