WebView的那些事

作者: Kevin_wzx | 来源:发表于2016-06-24 09:42 被阅读299次

WebView的那些事
关于Android WebView的那些事
NestedScrollView WebView 使用的那些事
android那些事--WebView拦截使用
WebView 的那些坑
JS与WebView交互的那些事（iOS篇）
【开发笔记】webView的那些事(代理方法)
webview那些事儿
WebView深度学习（二）之全面总结WebView遇到的坑及优
说说WebView那些事（header,cookie,注入js

1.简单认识

UIWebView用于在App中嵌入网页内容，通常情况下是html格式的网页

2.UIWebView的基础知识

屏幕快照 2016-09-02 上午10.30.41.png

屏幕快照 2016-09-02 上午10.36.08.png

//当网页视图被指示载入内容而得到通知。应当返回YES，这样会进行加载。
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *) reuqest navigationType: (UIWebViewNavigationType)navigationType;

屏幕快照 2016-09-02 上午10.36.25.png

UIWebView控件加载网页的监听函数方法（webView协议中的方法）：

//当网页视图已经开始加载一个请求后，得到通知
-(void)webViewDidStartLoad:(UIWebView *)webView ;

//当网页视图结束加载一个请求之后，得到通知
-(void)webViewDidFinishLoad:(UIWebView *)webView ;

//当在请求加载中发生错误，失败时，得到通知。会提供一个NSSError对象，以标识所发生错误类型。
-(void)webView:(UIWebView *)webView DidFailLoadWithError:(NSError *)error;

//准备加载内容时调用的方法，通过返回值来进行是否加载的设置
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

7.加载

7.1 加载html资源（3种）

(1) - (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];

效果图：

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

例如：将本地html文件内容嵌入webView
NSString *resourcePath = [ [NSBundle mainBundle] resourcePath]; 
NSString *filePath = [resourcePath stringByAppendingPathComponent:@"test.html"]; 
NSString *htmlstring =[[NSString alloc] initWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil]; 
[self.webView loadHTMLString:htmlstring baseURL:[NSURL fileURLWithPath: [[NSBundle mainBundle] bundlePath]]]; 

或者如果不从html文件载入你也可以这样（像租车计费那种加字段）
NSString *html = [NSString stringWithFormat:@"<html><head lang='en'><meta charset='UTF-8'></head><body> <div style='margin-top: 100px'><h1>图片显示测试</h1><p style='width:580px;height: 539px;background: blue' onclick='picCallback()'>[站外图片上传中……(2)]</p><input type='button' value='CallCamera' onclick='OCModel.showAlertMsg(1,2)'></div><script type='text/javascript'>var picCallback = function(photos) {alert('photos');}var shareCallback = function(){alert('success');}</script></body></html>"];
// 用到的图片资源所在的路径
NSURL *url = [NSURL fileURLWithPath:[NSString stringWithFormat:@"%@",NSTemporaryDirectory()]];
[self.webView loadHTMLString:html baseURL:url];
如果baseURL为nil图片信息将不会显示出来

加载本地还可以这样：
利用fileURLWithPath 根据fileurl加载

NSURL *url = [NSURL fileURLWithPath:[NSString stringWithFormat:@"%@test.html",NSTemporaryDirectory()]];
[self.webView loadFileURL:url allowingReadAccessToURL:url];

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

NSString *path = [NSString stringWithFormat:@"%@test.html",NSTemporaryDirectory()];
NSData *Data = [NSData dataWithContentsOfFile:path];
[self.webView loadData:Data MIMEType:@"text/html" characterEncodingName:@"UTF-8" baseURL:[NSURL fileURLWithPath:NSTemporaryDirectory()]];

7.2 加载其他类型资源(doc,txt,pdf)

两种方法：fileURLWithPath 和 - loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL

(1). fileURLWithPath
txt文件

NSString *path = [[NSBundle mainBundle] pathForResource:@"readme" ofType:@"txt"];
[self.webView loadFileURL:[NSURL fileURLWithPath:path] allowingReadAccessToURL:[NSURL fileURLWithPath:path]];

doc文件

NSString *path = [[NSBundle mainBundle] pathForResource:@"cwm.doc" ofType:nil];
[self.webView loadFileURL:[NSURL fileURLWithPath:path] allowingReadAccessToURL:[NSURL fileURLWithPath:path]];

注意：如果doc只在main bundle中使用的，拖入工程文件的时候可能会读取不到对应的path。原因我们拉入其他资源文件（比如：图片、代码文件等）Xcode都会自动添加到target 的 "Build Phases" 下 "Copy Bundle Resources目录下，但是我们拉过来的文件这里是找不到的，可能是Xcode无法识别这类文件（当我们拉去过来时），所以我们要做的就是把刚才添加的doc文件加入该目录下
如下图：

pdf文件

NSString *path = [[NSBundle mainBundle] pathForResource:@"iOS" ofType:@"pdf"];
[self.webView loadFileURL:[NSURL fileURLWithPath:path] allowingReadAccessToURL:[NSURL fileURLWithPath:path]];

(2). - loadData
txt文件

NSString *path = [NSString stringWithFormat:@"%@readme.txt",NSTemporaryDirectory()]; 
NSData *Data = [NSData dataWithContentsOfFile:path];
[self.webView loadData:Data MIMEType:@"text/plain" characterEncodingName:@"UTF-8" baseURL:[NSURL fileURLWithPath:NSTemporaryDirectory()]];

doc文件

NSString *path = [NSString stringWithFormat:@"%@cwm.doc",NSTemporaryDirectory()];
NSData *Data = [NSData dataWithContentsOfFile:path]; 
[self.webView loadData:Data MIMEType:@"application/vnd.openxmlformats-officedocument.wordprocessingml.document" characterEncodingName:@"UTF-8" baseURL:[NSURL fileURLWithPath:NSTemporaryDirectory()]];

pdf文件

NSString *path = [NSString stringWithFormat:@"%@iOS.pdf",NSTemporaryDirectory()]; 
NSData *Data = [NSData dataWithContentsOfFile:path]; 
[self.webView loadData:Data MIMEType:@"application/pdf" characterEncodingName:@"UTF-8" baseURL:[NSURL fileURLWithPath:NSTemporaryDirectory()]];

8.将文件下载到本地址然后再用webView打开

NSString *resourceDocPath = [[NSString alloc] initWithString:[[[[NSBundle mainBundle] resourcePath] stringByDeletingLastPathComponent] stringByAppendingPathComponent:@"Documents"]];
self.filePath = [resourceDocPath stringByAppendingPathComponent:[NSString stringWithFormat:@"maydoc%@",docType]];
NSData *attachmentData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:theUrl]];
[attachmentData writeToFile:filePath atomically:YES];
NSURL *url = [NSURL fileURLWithPath:filePath];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
[attachmentWebView loadRequest:requestObj];
//删除指定目录下的文件NSFileManager *magngerDoc=[NSFileManager defaultManager];
[magngerDoc removeItemAtPath:filePath error:nil];

9.获取webView页面内容信息

//获取web页面内容信息
NSString *docStr=[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.textContent"];

//此处获取的是个json字符串
SBJsonParser *parserJson=[[[SBJsonParser alloc]init]autorelease];

//将json字符串转化为字典
NSDictionary *contentDic=[parserJson objectWithString:docStr];

10.在该代理方法中判断与webView的交互，可通过html里定义的协议实现

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

11.只有在webView加载完毕之后才能够调用对应页面中的js方法
12.注意:

屏幕快照 2016-09-02 上午11.06.14.png

13.处理webView展示txt文档乱码问题

屏幕快照 2016-09-02 上午11.08.35.png

图片中超出的两句代码
1.NSString* aStr = [[NSString alloc] initWithData:attachmentData encoding:NSUTF8StringEncoding];
2.[attachmentWebView loadHTMLString:responseStr baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];

14.取消长按webView上的链接弹出actionSheet的问题

-(void)webViewDidFinishLoad:(UIWebView *)webView{ 
   [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout = 'none';"];
}

15.取消webView上的超级链接加载问题

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { 
   if (navigationType==UIWebViewNavigationTypeLinkClicked) { 
        return NO; 
   } else { 
        return YES; 
   }
}

16.改变webView中的字体大小和颜色

(1) 改变字体大小，采用JavaScript
double fontSize=18;
NSString *fsString = [[NSString alloc] initWithFormat:@"document.body.style.fontSize=%f",fontSize];
[webView stringByEvaluatingJavaScriptFromString:fsString];

(2) 改变字体颜色
NSString *colorStr=@"purple";
NSString *fontColor=[NSString stringWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor='%@'",colorStr];
[webView stringByEvaluatingJavaScriptFromString:fontColor];

3.常用属性与方法归纳

屏幕快照 2016-09-02 下午2.47.18.png

屏幕快照 2016-09-02 下午2.47.30.png

屏幕快照 2016-09-02 下午2.47.46.png

屏幕快照 2016-09-02 下午2.48.00.png

屏幕快照 2016-09-02 下午2.48.25.png

4.WebView加载url时的高度自适应（嵌套在cell中）

在创建好表格视图(xib画)及网页视图后 [代码如下]：

屏幕快照 2016-06-24 上午9.43.18.png

屏幕快照 2016-06-24 上午9.45.01.png

屏幕快照 2016-06-24 上午9.28.49.png

效果图如下：

屏幕快照 2016-06-24 上午9.31.12.png

屏幕快照 2016-06-24 上午9.31.25.png

2.同样情况下在进行加载html字段时遇到问题：
需用@"document.documentElement.offsetHeight"，用body出现高度不准情况。注意documentElement与body的区别
Demo地址：https://github.com/songzhiming/TableCellAddWebView

5. WKWebView控件 (UIWebView 的升级版)

-优点:可以监听进度条,比UIWebView功能更加多
-缺点: iOS 8以后
-使用:1.#import <WebKit/WebKit.h> 2.需要手动把WebKit框架编译

- (void)viewDidLoad {
    [super viewDidLoad];
    WKWebView *webView = [[WKWebView alloc] init];
    [_contentView addSubview:webView];

    // 添加底部额外滚动区域
    webView.scrollView.contentInset = UIEdgeInsetsMake(0, 0, 44, 0);
    // 展示网页
    NSURLRequest *request = [NSURLRequest requestWithURL:_url];
    [webView loadRequest:request];
// 前进,后退,刷新,进度条
    // KVO监听属性
    // Observer:观察者
    // KeyPath:监听哪个属性
    // options:NSKeyValueObservingOptionNew,监听新值改变
    [webView addObserver:self forKeyPath:@"canGoBack" options:NSKeyValueObservingOptionNew context:nil];
    [webView addObserver:self forKeyPath:@"canGoForward" options:NSKeyValueObservingOptionNew context:nil];
    [webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
    [webView addObserver:self forKeyPath:@"title" options:NSKeyValueObservingOptionNew context:nil];
}

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    WKWebView *webView = _contentView.subviews[0];
    webView.frame = _contentView.bounds;
}

// 监听属性有新值就会调用
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
    _backItem.enabled = _webView.canGoBack;
    _forwardItem.enabled = _webView.canGoForward;
    _progressView.progress = _webView.estimatedProgress;
    _progressView.hidden = _webView.estimatedProgress>= 1;
    self.title = _webView.title;
}

// 对象即将销毁,移除观察者
- (void)dealloc
{
    [_webView removeObserver:self forKeyPath:@"canGoBack"];
    [_webView removeObserver:self forKeyPath:@"canGoForward"];
    [_webView removeObserver:self forKeyPath:@"estimatedProgress"];
    [_webView removeObserver:self forKeyPath:@"title"];
}
// 后退
- (IBAction)back:(id)sender {
    [_webView goBack];
}

// 前进
- (IBAction)forward:(id)sender {
    [_webView goForward];
}

// 刷新
- (IBAction)refresh:(id)sender {
    [_webView reload];
}

WebView的那些事
1.简单认识 UIWebView用于在App中嵌入网页内容，通常情况下是html格式的网页 2.UIWebView...
关于Android WebView的那些事
[TOC] 概述 Webkit是一个开源浏览器项目，其中，对Android开发者来说，或多或少的都有些接触。在应...
NestedScrollView WebView 使用的那些事
google 已经不建议使用NestedScrollView 嵌套Webview 来使用了，但是实际上，很多小...
android那些事--WebView拦截使用
WebView最简单的用法就是loadUrl方法.常用代码如下. WebView拦截请求 WebView调用loa...
WebView 的那些坑
转自 http://www.jianshu.com/p/3ad7c39858ec 不知不觉，Hybird App已...
JS与WebView交互的那些事（iOS篇）
这篇文章我们整理下项目中,我们可能使用到的OC与 JS 原生交互场景下的使用:1.浏览web页面,点击某个方法,并...
【开发笔记】webView的那些事(代理方法)
图片样例：代码复制： //加载网络请求 - (void)loadRequest:(NSURLRequest *)...
webview那些事儿
收集参考的资料链接全面总结WebView遇到的坑及优化https://mp.weixin.qq.com/s/Fy...
WebView深度学习（二）之全面总结WebView遇到的坑及优
上篇文章讲到了WebView的基本使用以及Android和js的交互. 这篇文章讲一下WebView遇到的那些坑，...
说说WebView那些事（header,cookie,注入js
前言昨天路过公司外面花园时候，不知觉腊梅已经开花了，才发觉春天来了。来城市生活这几年，完全忘记了时令的交替，只知...