动态获取UIWebView的真正高度
场景
在 App 中使用UIWebView加载网页, 与原生的 UI 显示在一起,一般情况下,webView 的 内容一页是肯定不够的,换句话说,webView 的高度是不定的,那如果原生的 UI是一个 ScrollView,高度也是不定的,那放在一起的话就会有两个 ScrollView 分别滚动,而这样的体验是很差的。所以需要计算 webView 的高度,设置ScrollView可滚动,WebView 不可滚动。
尝试
我们想要的结果是将 WebView 设置为不可滚动,与原生的 UI 融合在一起,那这种情况下,我们必须得到 WebView 的内容高度,让 WebView 的高度与它所需要加载的网页的内容高度一致,才能让 WebView 将内容完全显示。一开始我是在webView加载完成的回调中去获取 webView 的 contentSize的高度。
-(void)webViewDidFinishLoad:(UIWebView *)webView{
NSLog(@"加载完成的时候的方法调用");
//WebView的高度
NSString * htmlHeight = [self stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"];
float height = htmlHeight.floatValue;
NSLog(@"htmlHeight:%f",height);
CGRect rect = self.frame;
rect.size.height = height;
self.frame = rect;
}
用这样子的方法得到高度很有可能不是web的真实高度,如果web中有很多 图片未加载完成 的话,获取的高度将小于真实高度,那在它加载完成后,内容将显示不全。
解决
最终我是监听了 webView的 contentSize,每当contentSize的值改变时就去更改webView 的frame。
//监听webView的contentSize,每当contentSize的值改变时就去更改webView的frame
[self.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil];
然后在回调方法中计算WebView的高度,改变其frame
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
if ([keyPath isEqualToString:@"contentSize"]) {
float webViewHeight = [[self stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"] floatValue];
// NSLog(@"webViewHeight:%f",webViewHeight);
CGRect newFrame = self.frame;
float curHeight = self.frame.size.height;
newFrame.size.height = webViewHeight;
if(newFrame.size.height!=curHeight){
self.frame = newFrame;
if(self.questionDelegate&&[self.questionDelegate respondsToSelector:@selector(questionViewDidFinishLoad:)]){
[self.questionDelegate questionViewDidFinishLoad:self];
}
}
}
}
最后,记得在页面消失viewWillDisappear或自定义的WebView的方法removeFromSuperview中remove 监听对象,否则会出现crash异常,造成应用闪退。
-(void)removeFromSuperview{
@try{
[self.scrollView removeObserver:self forKeyPath:@"contentSize" context:nil];
}@catch(NSException * e){
NSLog(@"%@",e);
}
[super removeFromSuperview];
}
动态获取UIWebView的真正高度的更多相关文章
- [Flex] 动态获取组件宽度和高度
flex中我们有时并不想一开始就设置某个组件的宽度和高度,而想动态获取某个组件经填充后的width和height,但是会发现width和height均为0,这时我们可以注册一下两个事件之一来解决. i ...
- 获取UIWebView的内容高度
本文转载至 http://i.cnblogs.com/EditPosts.aspx?opt=1 #pragma mark - UIWebview delegete - (void)webViewD ...
- JS动态获取浏览器宽度和高度
$(window).resize(function() { var width = $(this).width(); var height = $(this).height(); });
- swift 动态获取label宽度或高度
func getLabHeigh(labelStr:String,font:UIFont,width:CGFloat) -> CGFloat { let statusLabelText: NSS ...
- 微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
- Js动态获取iframe子页面的高度////////////////////////zzzz
Js动态获取iframe子页面的高度 Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...
- UITableView自定义Cell中,纯代码编程动态获取高度
在UITableView获取高度的代理方法中,经常需要根据实际的模型重新计算每个Cell的高度.直接的做法是在该代理方法中,直接根据模型来返回行高:另 [1]-(CGFloat)tableView:( ...
- Swift4 - 动态计算UITableView中tableHeaderView的高度 - 获取子控件高度和宽度
核心 : /// 获取 子控件高度 func sizeHeaderToFit(view:UIView) { view.setNeedsLayout() view.layoutIfNeeded() le ...
- 从动态获取div高度的问题展开来看
ps 可能篇幅比较长,请大家耐心看看 今天有人在群里问我 动态获取高度怎么获取 我就说jq中的outerHeight. height .innerHeight 原生的height clientH ...
随机推荐
- 面试前的准备---C#知识点回顾----01
过完年来,准备找份新工作,虽然手里的工作不错,但树挪死,人挪活.咱不能一直在一个坑里生活一辈子,外面的世界毕竟是很美好的. 为了能正常的找到自己中意的工作,最近是将所有的基础知识拿出来复习了一次.仅作 ...
- Android应用自动更新功能的实现!!!
自动更新功能的实现原理,就是我们事先和后台协商好一个接口,我们在应用的主Activity里,去访问这个接口,如果需要更新,后台会返回一些数据(比如,提示语:最新版本的url等).然后我们给出提示框,用 ...
- Sqlserver系列(二) 模糊查询 like
通配符 % 匹配零个或多个字符 _ 匹配单个字符 [] 指定范围 ([a-f]) 或集合 ([abcdef]) 中的任何单个字符. [^] 不属于指定范围 ([a-f]) 或集合 ([abcdef] ...
- URL & webkitURL
base64带来的坑 在web中想要是实现图片在线预览的方式有几种 1.先上传 2.使用FileReader对象 3.URL.createObjectURL(file|blob) base64 能将图 ...
- 层次节点——NODE节点
1.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- 一段phpcurl代码
$header[] = 'Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-fl ...
- cocos2dx工程中接入支付宝sdk
1. 首先去支付宝官网下载开发者文档 2. 然后按着开发者文档将支付宝的sdk导入到你的工程中,并关联到工程中,步骤入下图: (1)将从支付宝官方网站获得的支付宝的sdk的jar包拷贝到工程中的lib ...
- nginx上传模块nginx_upload_module使用
1.安装模块 1 cd /data/software 2 wget http://www.grid.net.ru/nginx/download/nginx_upload_module-2.0.12.t ...
- Oracle EBS-SQL (PO-17):检查供货比例不为100%.sql
select * from apps.MRP_SOURCING_RULES msrwhere organization_id=X. a ...
- [Leetcode][Python]51: N-Queens
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 51: N-Queenshttps://oj.leetcode.com/pro ...