iOS中UIWebView的技能

http://www.cnblogs.com/mddblog/p/5281748.html

一、整体介绍

UIWebView自iOS2就有，WKWebView从iOS8才有，毫无疑问WKWebView将逐步取代笨重的UIWebView。通过简单的测试即可发现UIWebView占用过多内存，且内存峰值更是夸张。WKWebView网页加载速度也有提升，但是并不像内存那样提升那么多。下面列举一些其它的优势：

更多的支持HTML5的特性

官方宣称的高达60fps的滚动刷新率以及内置手势

Safari相同的JavaScript引擎

将UIWebViewDelegate与UIWebView拆分成了14类与3个协议(官方文档说明)

另外用的比较多的，增加加载进度属性：estimatedProgress

二、UIWebView使用说明

1 举例：简单的使用

UIWebView使用非常简单，可以分为三步，也是最简单的用法，显示网页

- (void)simpleExampleTest {

// 1.创建webview，并设置大小，"20"为状态栏高度

UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20)];

// 2.创建请求

NSMutableURLRequest *request =[NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http://www.cnblogs.com/mddblog/"]];

// 3.加载网页

[webView loadRequest:request];

// 最后将webView添加到界面

[self.view addSubview:webView];

}


2 一些实用函数

一些常用的属性和变量

@property (nonatomic, assign) id 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 dataDetectorTypes NS_AVAILABLE_IOS(3_0);

设置某些数据变为链接形式，这个枚举可以设置如电话号，地址，邮箱等转化为链接

@property (nonatomic) BOOL allowsInlineMediaPlayback NS_AVAILABLE_IOS(4_0);

设置是否使用内联播放器播放视频

@property (nonatomic) BOOL mediaPlaybackRequiresUserAction NS_AVAILABLE_IOS(4_0);

设置视频是否自动播放

@property (nonatomic) BOOL mediaPlaybackAllowsAirPlay NS_AVAILABLE_IOS(5_0);

设置音频播放是否支持ari play功能

@property (nonatomic) BOOL suppressesIncrementalRendering NS_AVAILABLE_IOS(6_0);

设置是否将数据加载如内存后渲染界面

@property (nonatomic) BOOL keyboardDisplayRequiresUserAction NS_AVAILABLE_IOS(6_0);

设置用户交互模式


加载函数:

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

- (void)loadHTMLString:(NSString *)stringbaseURL:(nullable NSURL *)baseURL;

- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;


UIWebView不仅可以加载HTML页面，还支持pdf、word、txt、各种图片等等的显示。下面以加载mac桌面上的png图片：/Users/FYZ/Desktop/MaiziIcon.png为例


//1.获取url

NSURL *url = [NSURL fileURLWithPath:@"/Users/FYZ/Desktop/MaiziIcon.png"];

//2.创建请求

NSURLRequest *request=[NSURLRequest requestWithURL:url];

//3.加载请求[self.webView loadRequest:request];

网页导航刷新有关函数:

// 刷新

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


3 代理协议使用：UIWebViewDelegate

一共有四个方法:

/// 是否允许加载网页，也可获取js要打开的url，通过截取此url可与js交互

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

NSString *urlString = [[request URL] absoluteString];

urlString = [urlString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

NSArray *urlComps = [urlString componentsSeparatedByString:@"://"];

NSLog(@"urlString=%@---urlComps=%@",urlString,urlComps);

return YES;

}

/// 开始加载网页

- (void)webViewDidStartLoad:(UIWebView *)webView {

NSURLRequest *request = webView.request;

NSLog(@"webViewDidStartLoad-url=%@--%@",[request URL],[request HTTPBody]);

}

/// 网页加载完成

- (void)webViewDidFinishLoad:(UIWebView *)webView {

NSURLRequest *request = webView.request;

NSURL *url = [request URL];

if ([url.path isEqualToString:@"/normal.html"]) {

NSLog(@"isEqualToString");

}

NSLog(@"webViewDidFinishLoad-url=%@--%@",[request URL],[request HTTPBody]);

NSLog(@"%@",[self.webView stringByEvaluatingJavaScriptFromString:@"document.title"]);

}

/// 网页加载错误

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {

NSURLRequest *request = webView.request;

NSLog(@"didFailLoadWithError-url=%@--%@",[request URL],[request HTTPBody]);

}


4 与js交互

主要有两方面：js执行OC代码、oc调取写好的js代码

js执行OC代码：js是不能执行oc代码的，但是可以变相的执行，js可以将要执行的操作封装到网络请求里面，然后oc拦截这个请求，获取url里面的字符串解析即可，这里用到代理协议的- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType函数。

oc调取写好的js代码：这里用到UIwebview的一个方法。示例代码一个是网页定位，一个是获取网页title：

// 实现自动定位js代码, htmlLocationID为定位的位置(由js开发人员给出)，实现自动定位代码，应该在网页加载完成之后再调用

NSString *javascriptStr = [NSString stringWithFormat:@"window.location.href = '#%@'",htmlLocationID];

// webview执行代码  oc执行js  stringByEvaluatingJavaScriptFromString:

[self.webView stringByEvaluatingJavaScriptFromString:javascriptStr];

// 获取网页的title

NSString *title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];

与js交互的实例

很多时候，我们要对网页做一些编辑，比如加载一个网页后，个别原因，我们不想显示新闻的来源，如下图的新闻来源“新华网”，

那我们就可以使用js代码将这个标签去掉，且只留下时间。js代码的编写，根据火狐浏览器查看它的标签名称，然后做处理，如上图，具体代码如下：

- (void)deleteNewsSource {

// 1.去掉页面标题

NSMutableString *str = [NSMutableString string];

// 去掉导航页，如果想把“腾讯新闻”导航栏一并去掉，就打开注释

//    [str appendString:@"document.getElementsByClassName('g-header')[0].style.display = 'none';"];

// 来源

[str appendString:@"if(document.getElementsByClassName('g-wrapper-author')[0].innerHTML.indexOf(' ') == -1){document.getElementsByClassName('g-wrapper-author')[0].innerHTML = document.getElementsByClassName('g-wrapper-author')[0].innerHTML}else{document.getElementsByClassName('g-wrapper-author')[0].innerHTML = document.getElementsByClassName('g-wrapper-author')[0].innerHTML.split(' ')[1];}"];

// 执行js代码

[_webView stringByEvaluatingJavaScriptFromString:str];

}

innerHTML在JS是双向功能：获取对象的内容  或  向对象插入内容；

如：

这是内容 ，

我们可以通过  document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；

也可以对某对象插入内容，如  document.getElementById('abc').innerHTML='这是被插入的内容';

这样就能向id为abc的对象插入内容。

代码执行的时机，一般情况下是等待网页加载完成- (void)webViewDidFinishLoad:(UIWebView *)webView里面执行，比较合理，但是有延迟，我们会发现刚开始有来源，然后突然又没有了，即js代码执行有延迟。

- (void)webViewDidStartLoad:(UIWebView *)webView {

// 1.去掉页面来源标签，时间根据需要自己设置，定时器在这里开启具有一定危险性

                 NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:0.2 target:self         selector:@selector(deleteNewsSource) userInfo:nil repeats:YES];

                  [ [NSRunLoop mainRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];

               self.timer = timer;

}

三、WKWebView使用说明

1 简单使用

与UIWebview一样，仅需三步:

- (void)simpleExampleTest {

// 1.创建webview，并设置大小，"20"为状态栏高度

WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20)];

// 2.创建请求

NSMutableURLRequest *request =[NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http://www.cnblogs.com/mddblog/"]];

// 3.加载网页

[webView loadRequest:request];

// 最后将webView添加到界面

[self.view addSubview:webView];

}


2 一些实用函数

加载网页函数

相比UIWebview，WKWebView也支持各种文件格式，并新增了loadFileURL函数，顾名思义加载本地文件，不要用loadRequest来加载本地HTML，另外，加载网页显示属于UI，所以应在主线程里面执行加载网页函数，不过即使在其它线程执行了加载网页函数，也没关系，苹果已做了处理，保证UI在主线程更新。

/// 模拟器调试加载mac本地文件

- (void)loadLocalFile {

// 1.创建webview，并设置大小，"20"为状态栏高度

WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20)];

// 2.创建url  userName：电脑用户名

NSURL *url = [NSURL fileURLWithPath:@"/Users/userName/Desktop/bigIcon.png"];

// 3.加载文件

[webView loadFileURL:url allowingReadAccessToURL:url];

// 最后将webView添加到界面

[self.view addSubview:webView];

}

/// 其它三个加载函数

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

- (WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;

- (WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL;


网页导航刷新相关函数

和UIWebview几乎一样，不同的是有返回值，WKNavigation(已更新)，另外增加了函数reloadFromOrigin和goToBackForwardListItem。

reloadFromOrigin会比较网络数据是否有变化，没有变化则使用缓存，否则从新请求。

goToBackForwardListItem：比向前向后更强大，可以跳转到某个指定历史页面


@property (nonatomic, readonly) BOOL canGoBack;

@property (nonatomic, readonly) BOOL canGoForward;

- (WKNavigation *)goBack;

- (WKNavigation *)goForward;

- (WKNavigation *)reload;

- (WKNavigation *)reloadFromOrigin; // 增加的函数

- (WKNavigation *)goToBackForwardListItem:(WKBackForwardListItem *)item; // 增加的函数

- (void)stopLoading;

一些常用属性

allowsBackForwardNavigationGestures：BOOL类型，是否允许左右划手势导航，默认不允许

estimatedProgress：加载进度，取值范围0~1

title：页面title

.scrollView.scrollEnabled：是否允许上下滚动，默认允许

backForwardList：WKBackForwardList类型，访问历史列表，可以通过前进后退按钮访问，或者通过goToBackForwardListItem函数跳到指定页面

执行js代码

/jsStr为要执行的js代码，字符串形式

[webView evaluateJavaScript:jsStr completionHandler:^(iditem, NSError *_Nullable error) {//执行结果回调}];

3 代理协议使用

一共有三个代理协议：

WKNavigationDelegate：最常用，和UIWebViewDelegate功能类似，追踪加载过程，有是否允许加载、开始加载、加载完成、加载失败。下面会对函数做简单的说明，并用数字标出调用的先后次序：1-2-3-4-5

三个是否允许加载函数：

/// 接收到服务器跳转请求之后调用 (服务器端redirect)，不一定调用

- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;

/// 3 在收到服务器的响应头，根据response相关信息，决定是否跳转。decisionHandler必须调用，来决定是否跳转，参数WKNavigationActionPolicyCancel取消跳转，WKNavigationActionPolicyAllow允许跳转

- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;

/// 1 在发送请求之前，决定是否跳转

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

追踪加载过程函数:

// 2 页面开始加载

- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;

/// 4 开始获取到网页内容时返回

- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;

/// 5 页面加载完成之后调用

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;

//6页面加载失败时调用

- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;


WKScriptMessageHandler：必须实现的函数，是APP与js交互，提供从网页中收消息的回调方法，即js可以调用app的方法

当然需要对webview做一些特殊处理，创建的时候调用initWithFrame:configuration:做一些配置,configuration为WKWebViewConfiguration类型，具体不再详述，代理方法如下：

///message: 收到的脚本信息

.- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

当然，app也可以执行js代码，如下：

///jsStr为要执行的js代码，字符串形式

[webView evaluateJavaScript:jsStr completionHandler:^(iditem, NSError *_Nullable error) {

                     //执行结果回调

}];


WKUIDelegate：UI界面相关，原生控件支持，三种提示框：输入、确认、警告。首先将web提示框拦截然后再做处理

/// 创建一个新的WebView

- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;

/* 输入框，页面中有调用JS的 prompt 方法就会调用该方法 */

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;

/* 确认框，页面中有调用JS的 confirm 方法就会调用该方法 */

- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;

/* 警告框，页面中有调用JS的 alert 方法就会调用该方法 */

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;


四、示例代码

代码可以实现一般网络显示，加载本地文件(pdf、word、txt、图片等等)

搜索框搜索界面，搜索框输入file://则加载本地文件，http://则加载网络内容，如果两者都不是则搜索输入的关键字。

下部网络导航，后退、前进、刷新、用Safari打开链接四个按钮

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335

推荐阅读更多精彩内容

  • WebView
    一、WebView WebView就是一个内嵌浏览器控件，在iOS中主要有两种WebView：UIWebView和...
    iOS祎阅读 1,057评论 0赞 2
  • WKWebview 处理
    前言 关于UIWebView的介绍，相信看过上文的小伙伴们，已经大概清楚了吧，如果有问题，欢迎提问。 本文是本系列...
    CoderLF阅读 8,927评论 2赞 12
  • HTML5与 iOS 交互方法总结
    1. 利用 WKWebView 进行交互(系统 API) 2. 利用 UIWebView 进行交互(系统 API)...
    ElvisSun阅读 966评论 0赞 1
  • WKWebView与JS交互实战技巧之API介绍
    前言 给大家介绍另外一种基于 iOS 8 新推出的 WKWebView 组件，构建出自己的混合开发框架。 WKWe...
    iwolfox阅读 1,094评论 1赞 3
  • iOS开发系列--网络开发
    iOS开发系列--网络开发 概览 大部分应用程序都或多或少会牵扯到网络开发，例如说新浪微博、微信等，这些应用本身可...
    lichengjin阅读 3,617评论 2赞 7