`

WebView的使用

    博客分类:
  • ios
ios 
阅读更多
1、使用UIWebView加载网页

运行XCode 4.3,新建一个Single View Application,命名为WebViewDemo。

[img]

[/img]



2、加载WebView

在ViewController.h添加WebView成员变量和在ViewController.m添加实现
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    UIWebView *webView;
}
@end


- (void)viewDidLoad
{
    [super viewDidLoad];
    webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
    NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]];
    [self.view addSubview: webView];
    [webView loadRequest:request];
}



运行,这样百度网页就打开了
[img]

[/img]




手机的网络环境是实时变化的,网络慢的时候,怎么提示用户网页正在打开呢?在网页打开出错的时候怎么提示用户呢?这时候我们就需要知道网页什么时候打开的,

什么时候加载完成,什么时候出错了。那么我们需要实现这个<UIWebViewDelegate>协议

3、实现协议,在ViewController.h修改如下:
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UIWebViewDelegate>
{
    UIWebView *webView;
}
@end


按住control+command+向上键,切换到ViewController.m文件,这是我们在文件中打入- (void) webView,就能看到如下实现方法:

[img]

[/img]


UIWebView中几个重要的函数
1.- (void )webViewDidStartLoad:(UIWebView  *)webView   网页开始加载的时候调用
2.- (void )webViewDidFinishLoad:(UIWebView  *)webView  网页加载完成的时候调用
3.- (void)webView:(UIWebView *)webView  didFailLoadWithError:(NSError *)error 网页加载错误的时候调用



4、实现这三个方法,加入NSLog。

先在viewDidLoad 的webView实例化下面加上

    [webView setDelegate:self];设置代理。这样上面的三个方法才能得到回调。

三个方法实现如下:
- (void) webViewDidStartLoad:(UIWebView *)webView
{
    NSLog(@"webViewDidStartLoad");
}
- (void) webViewDidFinishLoad:(UIWebView *)webView
{
    NSLog(@"webViewDidFinishLoad");
}
- (void) webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
    NSLog(@"didFailLoadWithError:%@", error);
}



运行打印:

2012-06-23 15:20:29.728 WebViewDemo[1001:f803] webViewDidStartLoad

2012-06-23 15:20:29.991 WebViewDemo[1001:f803] webViewDidFinishLoad
那我们试试error情况,把wifi关掉,运行打印结果:

2012-06-23 15:23:58.939 WebViewDemo[1087:f803] webViewDidStartLoad

2012-06-23 15:23:59.016 WebViewDemo[1087:f803] webViewDidFinishLoad

请求结果不变,为什么关掉网络还成功了呢?缓存?我换163.com试试,这是真正的结果出来了:

2012-06-23 15:24:41.131 WebViewDemo[1134:f803] webViewDidStartLoad

2012-06-23 15:24:41.149 WebViewDemo[1134:f803] didFailLoadWithError:Error Domain=NSURLErrorDomain Code=-1009 "The Internet connection appears to be offline." UserInfo=0x6b41660 {NSErrorFailingURLStringKey=http://www.163.com/, NSErrorFailingURLKey=http://www.163.com/, NSLocalizedDescription=The Internet connection appears to be offline., NSUnderlyingError=0x6eae690 "The Internet connection appears to be offline."}
连接错误了,调用了didFailLoadWithError。



5、加载等待界面

为了给用户更直观的界面效果,我们加上等待的loading界面试试

在webViewDidStartLoad加入等待
- (void) webViewDidStartLoad:(UIWebView *)webView
{
    //创建UIActivityIndicatorView背底半透明View     
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];  
    [view setTag:108];  
    [view setBackgroundColor:[UIColor blackColor]];  
    [view setAlpha:0.5];  
    [self.view addSubview:view];  
    
    activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 32.0f, 32.0f)];  
    [activityIndicator setCenter:view.center];  
    [activityIndicator setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleWhite];  
    [view addSubview:activityIndicator];  

    [activityIndicator startAnimating];
}



加载完成或失败时,去掉loading效果
- (void) webViewDidFinishLoad:(UIWebView *)webView
{
    [activityIndicator stopAnimating];
    UIView *view = (UIView*)[self.view viewWithTag:108];
    [view removeFromSuperview];
    NSLog(@"webViewDidFinishLoad");

}
- (void) webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
    [activityIndicator stopAnimating];
    UIView *view = (UIView*)[self.view viewWithTag:108];
    [view removeFromSuperview];
}



运行效果:
[img]

[/img]

补充:加载本地的html文件
#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    UIWebView *webView = [[[UIWebView alloc] initWithFrame:CGRectMake(0, 100, 320, 360)] autorelease];
    
    //使用loadHTMLString()方法显示网页内容
    [webView loadHTMLString:[self getHtmlString] baseURL:nil];

    [self.view addSubview:webView];
}
    //读取html文件内容
- (NSString *)getHtmlString{
    //文件路径
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    
    NSString *contents = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
    return contents;
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

@end
  • 大小: 183.2 KB
  • 大小: 134.6 KB
  • 大小: 29.7 KB
  • 大小: 211.1 KB
分享到:
评论

相关推荐

    原生登录cookie保持提供webview使用

    本文将深入探讨这个主题,主要围绕"原生登录cookie保持提供webview使用"这一核心知识点进行展开。 首先,我们需要理解cookie的工作原理。Cookie是服务器在客户端存储的小型文本文件,通常用于跟踪用户会话、存储...

    Android之WebView使用Demo

    **Android之WebView使用Demo** 在Android开发中,`WebView`是一个非常重要的组件,它允许我们在应用程序内部加载和显示网页内容,极大地扩展了Android应用的功能。本教程将详细讲解如何在Android应用中使用`WebView...

    webView 使用指南及使用心得总结

    以下是对WebView使用指南及使用心得的详细总结: 一、WebView的基本使用 1. 添加依赖:在AndroidManifest.xml中添加Internet权限,以确保WebView能够访问网络。 ```xml ``` 2. 在布局文件中添加WebView: ```xml...

    android demo,webview使用的源代码

    【标题】:“Android Demo, WebView使用的源代码” 这个标题揭示了我们关注的是一个关于Android平台的演示项目,其中包含了使用WebView组件的源代码。WebView是Android SDK中的一个重要组件,它允许开发者在Android...

    WebView使用解析(一)之基本用法

    默认情况下,WebView使用自身的WebViewClient,但我们可以自定义一个WebViewClient来处理网络请求,例如重定向、加载进度等。下面的代码展示了如何自定义WebViewClient: ```java webView.setWebViewClient(new ...

    Google官方的Chromium WebView使用示例.zip

    这个"Google官方的Chromium WebView使用示例.zip"是一个开源项目,旨在帮助开发者更好地理解和使用Chromium WebView进行应用开发。下面将详细介绍Chromium WebView的关键特性和使用方法,以及如何利用提供的示例进行...

    博客《 WebView使用详解(三)——WebChromeClient与LoadData补充》对应源码

    博客《 WebView使用详解(三)——WebChromeClient与LoadData补充》对应源码,博客地址:http://blog.csdn.net/harvic880925/article/details/51583253

    webview使用及使用自定义图片查看界面

    这篇博客“webview使用及使用自定义图片查看界面”将深入探讨如何有效地利用WebView,并介绍如何定制一个专门用于查看图片的界面。 首先,WebView的基本使用涉及到以下步骤: 1. 初始化WebView:在XML布局文件中...

    WebView使用及在WebView中Java和JS交互

    **WebView使用详解** WebView是Android系统提供的一种原生组件,用于在应用中展示网页内容,类似于浏览器的一个轻量级版本。它可以加载HTML、CSS、JavaScript等网页资源,为开发者提供了在Android应用中嵌入网页...

    这是一份全面&详细的Webview使用攻略

    Android WebView 使用攻略 Android 中的 WebView 是一个基于 webkit 引擎、展现 web 页面的控件,广泛应用于 Hybrid App 的开发中。下面是关于 WebView 的详细使用攻略。 1. 简介 WebView 是 Android 中的一个...

    WebView使用总结3(应用函数与JS函数互相调用)

    这篇博文"WebView使用总结3(应用函数与JS函数互相调用)"聚焦于如何实现Android应用中的Java函数与JavaScript函数之间的交互,这对于构建混合式应用或者增强Web页面与原生应用的集成至关重要。 首先,我们要理解...

    webView 使用指南

    这篇“webView使用指南”将深入探讨WebView的基本用法、高级特性以及实际应用中的注意事项,旨在帮助开发者更好地理解和运用这一功能。 一、WebView基础 1. 初始化WebView:首先,在布局文件中添加WebView元素,并...

    WebView入门小例子

    - 这可能是一个简单的示例项目,包含了一个基础的WebView使用案例。可能包含了AndroidManifest.xml配置、布局文件(如activity_main.xml)以及主Activity(MainActivity.java)的代码,展示了如何创建、初始化并...

    Android中webview使用x5内核集成demo

    Android x5内核集成demo 解决webview在使用内核时跟h5混合调用时出现的白屏,加载缓慢,vue报错各种兼容问题。在x5内核加载失败时,会切换成系统本身的内核来加载h5内容。如果项目上架Google商店等海外市场运营的,...

    Android4.4 WebView使用实例,实现后退前进刷新错误处理等功能

    Android 4.4 WebView使用实例,实现后退、前进、刷新、错误处理等功能。完成项目,可直接eclipse运行。有WebViewClient常用方法注释,WebChromeClient常用方法注释。

    Android中WebView使用

    在AndroidManifest.xml中,需要为使用WebView的Activity添加Internet权限: ```xml ``` 然后,在布局文件(如activity_main.xml)中添加WebView组件: ```xml &lt;WebView android:id="@+id/web_view" android:...

    使用webview 封使用了webrtc 打开摄像头 的页面demo

    在本示例中,“使用webview 封装使用了webrtc 打开摄像头的页面demo”意味着我们要在Webview中集成Webrtc,以便在Android应用中通过Web接口调用摄像头功能。 首先,我们需要了解Webview的基本用法。在...

    WebView使用Ionic框架混合式开发

    - **WebView优化**:启用硬件加速,使用`setLayerType(View.LAYER_TYPE_HARDWARE, null)`提高WebView渲染速度。 - **离线存储**:通过Service Worker和Cache API实现离线缓存,提升离线场景下的用户体验。 - **代码...

    Android中webview使用js与java交互

    在Android开发中,WebView是一个非常重要的组件,它允许我们在应用程序中内嵌网页内容,并且能够实现...通过理解并熟练掌握JavaScript Interface的使用,开发者可以充分利用WebView的功能,提升应用的用户体验。

Global site tag (gtag.js) - Google Analytics