webView计算文字高度
2016-09-09 本文已影响58人
何年何月
- 功能要求:数据库返回HTML字符串，使用webView加载。切webView不占一整页。
- 实现方法：底层scrollView，上边放一个tableView、一个webView。
效果如下###
Simulator Screen Shot Sep 9, 2016, 9.15.18 AM.png
Simulator Screen Shot Sep 9, 2016, 9.16.09 AM.png
上代码###
// scrollView的布局
self.scrollView = [[UIScrollView alloc]init];
// self.scrollView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:self.scrollView];
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.topView.mas_bottom).offset(0);
make.left.right.equalTo(self.view).offset(0);
make.bottom.equalTo(self.view).offset(0);
}];
// tableView和webView布局
self.tableView = [[UITableView alloc]initWithFrame:CGRectZero style:UITableViewStylePlain];
self.tableView.delegate = self;
self.tableView.dataSource = self;
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
// self.tableView.backgroundColor = [UIColor cyanColor];
[self.scrollView addSubview:self.tableView];
[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.scrollView).offset(0);
make.left.right.equalTo(self.view).offset(0);
// make.bottom.equalTo(self.view).offset(0);
make.height.mas_equalTo(230);
}];
// self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(requestData)];
UILabel *label = [UILabel new];
// label.backgroundColor = [UIColor blueColor];
label.textColor = RGBCOLOR(255, 102, 1);
label.font = [UIFont systemFontOfSize:17];
[self.scrollView addSubview:label];
[label mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(self.scrollView).offset(0);
make.top.equalTo(self.tableView.mas_bottom).offset(10);
make.height.mas_equalTo(30);
}];
label.text = @"活动详情";
self.myWebView = [[UIWebView alloc]init];
// self.myWebView.backgroundColor = [UIColor redColor];
[self.scrollView addSubview:self.myWebView];
self.myWebView.delegate = self;
[self.myWebView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(self.view).offset(0);
make.top.equalTo(label.mas_bottom).offset(5);
make.height.mas_equalTo(k_height-320);
}];
加载的HTML字符串数据###
<p><strong>拟定行程：</strong></p><p><strong>第 1天</strong></p><p><strong>酒店管家长水国际机场接机</strong></p><p><strong>15:00 抵达昆明柏联酒店（少数民族欢迎仪式）</strong></p><p><strong>15:30 参观整个酒店</strong></p><p><strong>16:30 中医经络检测</strong></p><p><strong>18:00 酒店柏联轩餐厅晚餐：云南特色石锅过桥米线</strong></p><p><strong>20:00 精油花瓣泡浴</strong></p><p><strong>21:00 柏联特色疗程（90分钟）</strong></p><p><strong>23:00 就寝</strong></p><p><br/></p><p><strong>第 2 天</strong></p><p><strong>08:00 瑜伽课程</strong></p><p><strong>09:00 早餐</strong></p><p><strong>10:00 参观茶博物馆，学习茶文化</strong></p><p><strong>12:00 柏联特色养生定制午餐</strong></p><p><strong>14:00 午休</strong></p><p><strong>15:00 茶席会，体验下午茶；品尝普洱茶，和茶艺师探讨生活中的禅茶</strong></p><p><strong>18:00 柏联米其林定制晚餐</strong></p><p><strong>20:00 精油花瓣泡浴</strong></p><p><strong>20:30 柏联中医疗程（120分钟）</strong></p><p><strong>23:00 就寝</strong></p><p><br/></p><p><strong>第 3天</strong></p><p><strong>8:00 太极课程</strong></p><p><strong>9:00 早餐</strong></p><p><strong>10:00 体验人文地理（可邑小镇、 石林、九乡、春城高尔夫，任选其一）<br/></strong></p><p><strong>18:00 柏联米其林定制晚餐</strong></p><p><strong>20:00 园区漫步</strong></p><p><strong>20:30 25个天然温泉泡池的露天园林式温泉体验，观看露天园林表演</strong></p><p><strong>22:00 就寝</strong></p><p><br/></p><p><strong>第 4天</strong></p><p><strong>08:00 瑜伽课程</strong></p><p><strong>09:00 早餐</strong></p><p><strong>10:00 花道体验</strong></p><p><strong>12:00 午餐</strong></p><p><strong>14:00 了解普洱茶知识以及冲泡普洱茶技巧 抄经书</strong></p><p><strong>18:00 柏联米其林定制晚餐</strong></p><p><strong>20:00 精油花瓣泡浴</strong></p><p><strong>20:30 柏联中医疗程（150分钟）</strong></p><p><strong>23:00 就寝</strong></p><p><br style="box-sizing: border-box;"/></p><p><strong>第5天</strong></p><p><strong>08:00 瑜伽课程</strong></p><p><strong>09:00 早餐</strong></p><p><strong>10:00 昆明市区一日游 ，观看云南映象表演</strong></p><p><strong>23:00 就寝<br style="box-sizing: border-box;"/></strong></p><p><br style="box-sizing: border-box;"/></p><p><strong>第6天</strong></p><p><strong>08:00 太极课程</strong></p><p><strong>09:00 早餐</strong></p><p><strong>10:00 了解生活中的中医</strong></p><p><strong>12:00 柏联特色养生定制午餐</strong></p><p><strong>14:00 午休</strong></p><p><strong>15:00 厨艺探讨</strong></p><p><strong>18:00 柏联米其林定制晚餐</strong></p><p><strong>20:00 精油花瓣泡浴</strong></p><p><strong>20:30 柏联特色疗程（90分钟）</strong></p><p><strong>23:00 就寝</strong></p><p><br/></p><p><strong>第7天</strong></p><p><strong>08:00 太极课程</strong></p><p><strong>09:00 早餐</strong></p><p><strong>10:30 中医经络检测</strong></p><p><strong>11:30 柏联滇味养身定制午餐</strong></p><p><strong>12:45 欢送仪式送机</strong></p><p><strong>13:45 抵达长水国际机场，办理登机手续</strong></p><p><br/></p><h3 style="box-sizing: border-box;margin-top: 0px;margin-bottom: 10px;line-height: 1;padding: 5px 0px 10px;border-bottom-width: 1px;border-bottom-style: dotted;border-bottom-color: rgb(213, 213, 213)"><strong><span style="color: rgb(0, 0, 0);">条款细则</span></strong></h3><p><strong>单人套餐费用包含：</strong></p><p><strong>接送机服务（需预约）<br style="box-sizing: border-box;"/>经络检测<br style="box-sizing: border-box;"/>行程中全部餐食安排（不含酒水）<br style="box-sizing: border-box;"/>行程中用车安排<br style="box-sizing: border-box;"/>行程中门票费用<br style="box-sizing: border-box;"/>露天园林温泉体验不限次数<br style="box-sizing: border-box;"/>温馨开夜床服务及晚安小礼物<br style="box-sizing: border-box;"/>客房内迷你吧小食、软饮<br style="box-sizing: border-box;"/>客房内时令鲜果盘<br style="box-sizing: border-box;"/>晨间瑜伽或太极课程（须预约）<br style="box-sizing: border-box;"/>高速宽带、wifi网络<br style="box-sizing: border-box;"/>昆明柏联酒店泳池别墅住宿<br style="box-sizing: border-box;"/>昆明柏联SPA经典疗程<br style="box-sizing: border-box;"/>茶道学习；花道学习；抄经书</strong></p><p><br/></p><p><br/></p>
[self.myWebView loadHTMLString:webInfo baseURL:nil];
webView遵循代理，重点来了###
-(void)webViewDidFinishLoad:(UIWebView *)webView{
[webView stringByEvaluatingJavaScriptFromString:
@"var script = document.createElement('script');"
"script.type = 'text/javascript';"
"script.text = \"function ResizeImages() { "
"var myimg,oldwidth;"
"var maxwidth = 300.0;" // UIWebView中显示的图片宽度
"var imageArr = document.images;"
"for(i=0;i <imageArr.length;i++){"
"var httpP = \"http://webapi.houno.cn\"+imageArr[i].getAttribute(\"src\");"
"imageArr[i].setAttribute(\"src\",httpP);"
"myimg = document.images[i];"
"if(myimg.width > maxwidth){"
"oldwidth = myimg.width;"
"myimg.width = maxwidth;"
"}"
"}"
"}\";"
"document.getElementsByTagName('head')[0].appendChild(script);"];
[webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
//字体大小
[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '80%'"];
//字体颜色
[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= 'gray'"];
// CGRect frame = webView.frame;
// CGSize fittingSize = [webView sizeThatFits:CGSizeZero];
// frame.size = fittingSize;
// webView.frame = frame;
//
// 文本高度
NSInteger height = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"] integerValue];
[self.myWebView mas_updateConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(height);
}];
// 设置偏离量
self.scrollView.contentSize = CGSizeMake(k_width, height + 260);
// 这个很重要，但是我也不知道什么情况。如果不重新添加就不会达到效果。
[self.scrollView addSubview:self.myWebView];
}
