iOS中UIWebView的使用详解及利用webview实现图文混排实例

iOS中UIWebView的使用详解

一、初始化与三种加载方式

     UIWebView继承与UIView，因此，其初始化方法和一般的view一样，通过alloc和init进行初始化，其加载数据的方式有三种：

第一种：

- (void)loadRequest:(NSURLRequest
*)request;

这是加载网页最常用的一种方式，通过一个网页URL来进行加载，这个URL可以是远程的也可以是本地的，例如我加载百度的主页：

    UIWebView * view = [[UIWebView alloc]initWithFrame:self.view.frame];

    [view loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];

    [self.view addSubview:view];

会得到如下的效果：





第二种：

- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;
这个方法需要将httml文件读取为字符串，其中baseURL是我们自己设置的一个路径，用于寻找html文件中引用的图片等素材。

第三种：

- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL
*)baseURL;
这个方式使用的比较少，但也更加自由，其中data是文件数据，MIMEType是文件类型，textEncodingName是编码类型，baseURL是素材资源路径。

二、一些常用的属性和变量

@property (nonatomic,assign)id <UIWebViewDelegate>
delegate;设置webView的代理

@property (nonatomic,readonly,retain)UIScrollView
*scrollView;内置的scrollView

@property (nonatomic,readonly,retain)NSURLRequest
*request;URL请求

- (void)reload;重新加载数据

- (void)stopLoading;停止加载数据

- (void)goBack;返回上一级

- (void)goForward;跳转下一级

@property (nonatomic,readonly,getter=canGoBack)BOOL canGoBack;获取能否返回上一级

@property (nonatomic,readonly,getter=canGoForward)BOOL canGoForward;获取能否跳转下一级

@property (nonatomic,readonly,getter=isLoading)BOOL loading;获取是否正在加载数据

- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;通过javaScript操作web数据

@property (nonatomic)BOOL scalesPageToFit;设置是否缩放到适合屏幕大小

@property (nonatomic)UIDataDetectorTypes dataDetectorTypesNS_AVAILABLE_IOS(3_0);设置某些数据变为链接形式，这个枚举可以设置如电话号，地址，邮箱等转化为链接

@property (nonatomic)BOOL allowsInlineMediaPlaybackNS_AVAILABLE_IOS(4_0);设置是否使用内联播放器播放视频

@property (nonatomic)BOOL mediaPlaybackRequiresUserActionNS_AVAILABLE_IOS(4_0);设置视频是否自动播放

@property (nonatomic)BOOL mediaPlaybackAllowsAirPlayNS_AVAILABLE_IOS(5_0);设置音频播放是否支持ari
play功能

@property (nonatomic)BOOL suppressesIncrementalRenderingNS_AVAILABLE_IOS(6_0);设置是否将数据加载如内存后渲染界面

@property (nonatomic)BOOL keyboardDisplayRequiresUserActionNS_AVAILABLE_IOS(6_0);设置用户交互模式

三、iOS7中的一些新特性

下面这些属性是iOS7之后才有的，通过他们可以设置更加有趣的web体验

@property (nonatomic)UIWebPaginationMode paginationModeNS_AVAILABLE_IOS(7_0);

    typedef NS_ENUM(NSInteger, UIWebPaginationMode) {

        UIWebPaginationModeUnpaginated,//不使用翻页效果

        UIWebPaginationModeLeftToRight,//将网页超出部分分页，从左向右进行翻页

        UIWebPaginationModeTopToBottom,//将网页超出部分分页，从上向下进行翻页

        UIWebPaginationModeBottomToTop,//将网页超出部分分页，从下向上进行翻页

        UIWebPaginationModeRightToLeft//将网页超出部分分页，从右向左进行翻页

    };

这个属性用来设置一种模式，当网页的大小超出view时，将网页以翻页的效果展示，枚举如下：

@property (nonatomic)CGFloat pageLengthNS_AVAILABLE_IOS(7_0);设置每一页的长度

@property (nonatomic)CGFloat gapBetweenPagesNS_AVAILABLE_IOS(7_0);设置每一页的间距

@property (nonatomic,readonly)NSUInteger pageCountNS_AVAILABLE_IOS(7_0);获取分页数

四、webView协议中的方法

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

准备加载内容时调用的方法，通过返回值来进行是否加载的设置

- (void)webViewDidStartLoad:(UIWebView *)webView;开始加载时调用的方法

- (void)webViewDidFinishLoad:(UIWebView *)webView;结束加载时调用的方法

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;加载失败时调用的方法

实例：

2.下面看一下效果：



步骤：

0.创建两个视图控制体

创建一个新项目，然后创建两个控制器LvesViewController和 LvesOriginalController

分别添加一个UIWebView到self.view上。

1.去除webView滚动时，上下的白边。

- (void)clearWebViewBackground:(UIWebView *)webView
{
UIWebView *web = webView;
for (id v in web.subviews) {
if ([v isKindOfClass:[UIScrollView class]]) {
[v setBounces:NO];
}
}
}

2.设置代理

//2. 设置代理
self.myWebView.delegate=self;

3.添加加载webview的视图

#pragma mark 加载WebView
-(void) loadMyWebView{
NSString *title=@"韩寒《后会无期》奇葩的吸金3秘籍";

NSString *linkStr=[NSString stringWithFormat:@"<a href='%@'>我的博客</a> <a href='%@'>原文</a>",@"http://blog.csdn.net/wildcatlele",@"http://jincuodao.baijia.baidu.com/article/26059"];

NSString *p1=@"韩寒《后会无期》的吸金能力很让我惊讶！8月12日影片票房已成功冲破6亿大关。而且排片量仍保持10 以上，以日收千万的速度稳步向七亿进军。";

NSString *p2=@"要知道，《后会无期》不是主流类型片，是一个文艺片。不像《小时代》，是一个商业主流的偶像电影。";
NSString *image1=[NSString stringWithFormat:@"<img src='%@'  height='280' width='300' />",@"http://nvren.so/uploads/allimg/c140801/140DR4554L40-YB9.jpg"];
NSString *image2=[NSString stringWithFormat:@"<img src='%@'  height='280' width='300' />",@"http://f.hiphotos.baidu.com/news/w%3D638/sign=78315beeb1fb43161a1f797918a44642/2934349b033b5bb58cb61bdb35d3d539b600bcb5.jpg"];

NSString *p3=@"太奇葩了！有人说，这是中国电影市场的红利，是粉丝电影的成功。但是，有一部投资3000万的粉丝电影《我就是我》，有明星，制作也不错，基本上是惨败。";

NSString *p4=@"《后会无期》卖的不是好故事，是优越感。特别是针对80、90后的人群，你有没有发现，看《后会无期》比看《小时代3》有明显的优越感。故事虽然一般，但是很多人看完后，会在微博、微信上晒照片。所以说，对一个族群靠的不是广度，而是深度。<br>\
\
很凶残，值得大家借鉴。韩寒《后会无期》还有什么秘密武器，欢迎《后会无期》团队或相关方爆料，直接留言即可，有料的可以送黎万强亲笔签名的《参与感》一书。";

//初始化和html字符串
NSString *htmlURlStr=[NSString stringWithFormat:@"<body style='background-color:#EBEBF3'><h2>%@</h2><p>%@</p> <p>%@ </p>%@ <br><p> %@</p> <p>%@</p>%@<p>%@</p></body>",title,linkStr,p1,image1,p2,p3,image2,p4];

[self.myWebView loadHTMLString:htmlURlStr baseURL:nil];

}

4.实现代理方法，（处理连接点击事件）

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{

NSString *urlStr=request.URL.absoluteString;

NSLog(@"url: %@",urlStr);

//为空，第一次加载本页面
if ([urlStr isEqualToString:@"about:blank"]) {
return YES;
}

//设置点击后的视图控制器
LvesOriginalController *originalC=[[LvesOriginalController alloc] init];
originalC.originUrl=urlStr; //设置请求连接
//跳转到点击后的控制器并加载webview
[self.navigationController pushViewController:originalC animated:YES];

return  NO;
}
//设置底部滚动不弹回
- (void)webViewDidFinishLoad:(UIWebView *)webView{
NSInteger height = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight;"] intValue];
NSString* javascript = [NSString stringWithFormat:@"window.scrollBy(0, %d);", height];
[webView stringByEvaluatingJavaScriptFromString:javascript];

}

5.实现OrigainalViewController

//
//  LvesOriginalController.m
//  WebViewDemo
//
//  Created by Lves Li on 14-8-15.
//  Copyright (c) 2014年 Lves. All rights reserved.
//

#import "LvesOriginalController.h"

@interface LvesOriginalController ()
{
UIWebView *_webView;
}
@end

@implementation LvesOriginalController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}

- (void)viewDidLoad
{
[super viewDidLoad];
//设置title
self.title=@"原文";

_webView=[[UIWebView alloc] init];
_webView.frame=[[UIScreen mainScreen] bounds];

[self.view addSubview:_webView];

[_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:self.originUrl]]];

}
@end

UIWebView保存图片

http://www.cocoachina.com/ios/20160616/16660.html