uiwebview html 位置,UIWebView 详解
UIWebView用于在App中嵌入网页内容，通常情况下是html格式的网页，也支持pdf, word等文档。
首先让我们了解一下UIWebView有哪些优点：
可跨平台
开发一次可以部署iOS、Android等平台。
发布更新快
在服务器端发布，能够实时更新终端展示，便于快速升级以及紧急修复bug。
排版布局能力强
强大的HTML+CSS让人膜拜
世界上有十全十美的人么？也许只有上帝吧。UIWebView的缺点：
性能
Native先生与HTML5先生争论时最喜欢说的一句话就是：“你性能不行”(看清楚了哈，不是“性能力不行”)。Web App运行在浏览器里，目前浏览器的开放能力难以支持HTML5与Native对抗。
数据通讯复杂
UIWebView与App之间进行数据通讯只能通过javascript或者UIWebViewDelegate来进行，客户端想传参数给UIWebView修改网页或者从网页中获取数据都比较复杂。
咱们应该扬长避短，在以下场景考虑使用UIWebView：
排版复杂的内容
图文混排、文字环绕、文章内各种超链及高亮显示。这些让iOS工程师抓狂的界面，让web前端小伙伴们搞定，吃顿饭，然后用UIWebView包起来。
需后台灵活控制的界面
认证、免责声明以及PM要求三天两头需要变幻莫测的页面等。怎么办？告诉我地址，UIWebView包起来，结束:)
原网页
查看新浪网、腾讯网等网页内容，这个木有办法，总不能让我们自己写一个浏览器功能吧。
UIWebView的常规使用方法：
加载内容
//加载网页或者本地文件
- (void)loadRequest:(NSURLRequest *)request;
//直接加载html内容，如果html中的图片等资源在本地目录，注意将baseURL指向该目录
- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;
//功能与上面类似
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;
实现UIWebViewDelegate
主要使用到的方法
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
//在这里截取网络请求，可以为所欲为的做你想做的事情:)
//…
}
使用stringByEvaluatingJavaScriptFromString与UIWebView中的网页进行数据通讯，需要你有点javascript功底，也可以去看看js bridge的相关文章。
上面说的东西是不是太俗套，太正统了？下面讲点实际点儿的吧。
科普一下：
UIWebView包含着一个scrollView，iOS5的时候已经公开，在此之前需写代码遍历UIWebView的subviews把它找出来。scrollView里面包含着一个UIWebBrowserView用于渲染网页内容的，该属性没有公开，需要遍历其subviews找出来。
去掉拖动到顶部或者底部时露出来的渐变颜色
如图所示：
image 解决办法：
将scrollView中包含的所有UIImageView隐藏
- (void)removeGradientBgColorOfWebView:(UIWebView*)aWebView{
NSArray *subViews = aWebView.subviews;
for (UIView* subView in subViews){
if ([subView isKindOfClass:[UIScrollView class]]) {
for (UIView* shadowView in [subView subviews]){
if ([shadowView isKindOfClass:[UIImageView class]]) {
[shadowView setHidden:YES];
}
}
}
}
}
结果：
image
白屏闪烁
你嵌入的html内容是有背景色的，但是在load的时候还是会有白屏闪烁，在展现你的内容前会出现白色背景，任凭你怎么设置UIWebView或者里面scrollView, webBrowserView的backgroundColor都没有作用。解决办法：
//在load之前，先设置两个属性
_webView.opaque = NO;
[_webView.scrollView.subviews enumerateObjectsUsingBlock:^(__kindof UIView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
NSString *ss = [NSString stringWithUTF8String:object_getClassName(obj)];
if ([ss isEqualToString:@"UIWebBrowserView"] ) {
[obj setHidden:YES];
*stop = YES;
}
}];
[_webView loadHTMLString:htmlStr baseURL:baseURL];
在UIWebViewDelegate中实现如下：
#pragma mark - UIWebViewDelegate
- (void)webViewDidStartLoad:(UIWebView *)webView{
[_webView.scrollView.subviews enumerateObjectsUsingBlock:^(__kindof UIView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
NSString *ss = [NSString stringWithUTF8String:object_getClassName(obj)];
if ([ss isEqualToString:@"UIWebBrowserView"] ) {
[obj setHidden:NO];
*stop = YES;
}
}];
}
- (void)webViewDidFinishLoad:(UIWebView *)webView{
_webView.opaque = YES;
_webView.backgroundColor = …;
}
在网页顶部加上一个headerView，并随着网页一起滚动
由于需要一起滚动，所以footerView应该是_webView.scrollView的subview。上面我们提到过_webView.scrollView.webBrowserView是用来渲染网页的view，所以我们的headerView只要在webBrowserView上面即可。
[_webView.scrollView addSubview:_headerView];
UIView *webBrowserView = [_webView webBrowserView];
CGRect frame = webBrowserView.frame;
frame.origin.y = CGRectGetMaxY(_headerView.frame);
webBrowserView.frame = frame;
注意：在scrollView顶部添加headerView，并且正确设置了webBrowserView的位置后不会影响到下面3中的contentSize计算，UIWebView应该已经考虑到了webBrowserView的位置偏移。
下面红色区域即是headerView
image
在网页的末尾加上一个footerView，并且跟着网页一块滚动
由于需要一起滚动，所以footerView应该是_webView.scrollView的subview。正常情况下你是不知道网页被渲染后的高度的，也就是说不知道_webView.scrollView.contentSize，如果知道contentSize就好办了，直接将footerView添加在末尾。
咱们可以利用KVO来解决这个问题。
//监听scrollView的contentSize的变化
- (void)webViewDidFinishLoad:(UIWebView *)webView{
[self addObserverForWebViewContentSize];
//0.1s后设置footerView的位置，以防止contentSize没有变化
[self performSelector:@selector(layoutFooterView) withObject:nil afterDelay:0.1];
}
有同学不禁要问：为什么需要监听contentSize的变化呢？在webViewDidFinishLoad中直接取_webView.scrollView.contentSize不就可以了吗？
解答：webViewDidFinishLoad会被多次回调，因为网页中有图片、表格等多种资源，UIWebView在加载资源的时候会不断调整contentSize以渲染新加载完成的内容。
//contentSize变化时，重新布局footerView
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
if (context == &kContentSizeFlag) {
[self layoutFooterView];
}
}
- (void)addObserverForWebViewContentSize{
[_webView.scrollView addObserver:self forKeyPath:@“contentSize” options:0 context:&kContentSizeFlag];
}
- (void) removeObserverForWebViewContentSize{
[_webView.contentScrollView removeObserver:self forKeyPath:@“contentSize”];
}
//设置footerView的合理位置
- (void)layoutFooterView{
//取消监听，因为这里会调整contentSize，避免无限递归
[self removeObserverForWebViewContentSize];
CGSize contentSize = _webView.scrollView.contentSize；
CGFloat y = CGRectGetMaxY(_webView.webBrowserView.frame);
//设置footerView的位置
_footerView.frame = CGRectMake(0, y, contentSize.width, footerHeight);
[_webView.scrollView addSubview:_footerView];
_webView.scrollView.contentSize = CGSizeMake(contentSize.width, y + footerHeight);
//重新监听
[self addObserverForWebViewContentSize];
}
//下图底部红色区域即footerView
image
滑动隐藏顶部Bar
如果你想在用户向上滑动时隐藏顶部bar，向下滑动时显示顶部bar，该怎么办呢？
_webView.scrollView的delegate是_webView自身，你是不能接管的，所以拿不到scrollView的相关事件。
怎么办呀？？？
好吧，答案就是：KVO, contentOffset
- (void)hideNavigationBar:(BOOL)animated { … }
- (void)showNavigationBar:(BOOL)animated { … }
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context｛
if(context == &kContentOffsetFlag){
CGFloat y = [object contentOffset].y;
UIScrollView *scrollView = _webView.scrollView;
CGPoint p = [scrollView.panGestureRecognizer velocityInView:scrollView];
CGFloat maxY = scrollView.contentSize.height + scrollView.contentInset.top - scrollView.bounds.size.height;
if(fabsf(p.y) < 0.001 && _contentOffsetY - y > 5 && y < maxY - 5){
[self showNavigationBar:YES];
}
else if(p.y < 0 && _webView.scrollView.dragging) {//上滑隐藏
[self hideNavigationBar:YES];
}
else if(p.y > 1500){//快速下滑显示
[self showNavigationBar:YES];
}
else if(y <= self.navigationBar.bounds.size.height){
[self showNavigationBar:NO];
}
}