uiwebview html 位置,UIWebView 详解

倪振海
2023-12-01

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

}

}

 类似资料: