webView内容高度，自适应高度

最新推荐文章于 2021-05-31 15:40:05 发布
最新推荐文章于 2021-05-31 15:40:05 发布
阅读量3.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： iOS 移动开发 文章标签： UIWebView iOS TableView
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jichunw/article/details/80310414
本文介绍了一种iOS开发中WebView加载H5并自适应高度的方法，通过监听webViewDidFinishLoad后的内容变化来更新高度，解决了图片延迟加载引起的显示异常问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

实现思路：

  1. webView加载H5链接，设置它为tableView的headerView，下方评论信息用Cell加载展示。
  2. 在webView的回调方法webViewDidFinishLoad中获取网页内容高度，设置为webView的高度，重新将webView赋给tableView的headerView。

Tip:将一个View赋值给UITableView的tableHeaderView时，不需要手动设置高度,HeaderView会自动使用View的高度。

webview.png

像上面这样，类似的方法很多，无论是JS获取，还是contentSize获取，最后结果都难以获取到准确高度，并非方法不行，而是：

webViewDidFinishLoad代理方法被调用时，页面并不一定完全展现完成，可能有图片还未加载出来，导致此时获取的高度是并不是最终高度，过会儿图片加载出来后，浏览器会重新排版，而我们在这之前给了一个错误高度，导致显示异常。

通过监听，在webViewDidFinishLoad之后获取到网页内容高度的变化
给webView的scrollView的contentSize属性添加监听，每当内容发生变化，contentSize一定会跟着变，捕获这个变动，在监听方法中实现webViewDidFinishLoad中的代码，也就是获取最新的内容高度赋给webView

监听.png

另外，在cell中使用webView获取高度不准确的解决办法跟上面一样，只不过需要注意cell中使用webView涉及到cell重用，会导致滑动列表时webView多次加载，影响性能，建议缓存高度。

如果上述方式解决不了你的问题，请尝试另一方案:iOS 【奇巧淫技】获取webView内容高度

原文链接 by:臭码农

react-native-webview 高度自适应
SummerCloudXT的博客
10-24 3430
移动端例如安卓的webview是会根据高度自己撑开的，但是RN 却不会，所以怎么办呢？ 2个办法 最简单的：使用react-native-autoheight-webview 如何使用： 如果你是RN大于等于 0.59 npm install react-native-autoheight-webview --save (rn >= 0.59, be capable of Hooks) 在0...
react-native WebView 自适应高度
XiaoZhuang__的博客
04-25 570
自适应高度，区分android 和ios /** * Created by ke2933 on 2018/11/08 * WebModul WebView 封装 * webContent WebView 内容 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, WebView, Alert, ScrollView } from 'react-native'; const Bas.
webview自适应屏幕
11-29
当图片或表格过大，超出屏幕时，可以使用demo中的一些代码，解决这个问题
webview自适应高度
myhong的博客
03-26 1612
//自适应屏幕 webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL); // 自适应 屏幕大小界面 webSettings.setLoadWithOverviewMode(true); ...
完美解决iOS的WebView自适应内容高度问题
热门推荐
iOS开发专栏
05-07 1万+
/////////////////////////////初始化，self.view是父控件/////////////////////////////////     _webView = [[UIWebView alloc] initWithFrame: CGRectMake(0, 0, self.view.frame.size.width, 0)];     _webView.del
android webview自动高度_webView高度自适应
weixin_32308101的博客
01-26 2040
开发中，一些地方用到webView需要根据其内容的多少来动态的计算高度并且自适应。但是往往获取到的高度并不是那么的精准，以至于布局错乱。我们以往的做法是：在webView的回调方法webViewDidFinishLoad中获取网页内容高度，设置为webView的高度，调整webView布局。实际上：webViewDidFinishLoad代理方法被调用时，页面并不一定完全展现完成，可能有图片还未加...
android webview 设置内容高度自适应,React Native 根据WebView内容自动设置高度
weixin_35702486的博客
05-25 793
/*** Custom WebView with autoHeight feature** @prop source: Same as WebView* @prop autoHeight: true|false* @prop defaultHeight: 100* @prop width: device Width* @prop ...props*/import React, { Componen...
iOS Webview自适应实际内容高度的4种方法详解
01-04
- (void)webViewDidFinishLoad:(UIWebView *)webView { CGFloat webViewHeight=[webView.scrollView contentSize].height; CGRect newFrame = webView.frame; newFrame.size.height = webViewHeight; webView.frame ...
ios-TableView Cell加载WebiView高度自适应.zip
07-11
总之，"ios-TableView Cell加载WebiView高度自适应.zip"的内容是关于如何在UITableView的Cell中嵌入WKWebView，并使其高度根据网页内容动态自适应。通过结合WKWebView的代理方法、JavaScript的注入以及UITableView的...
ios 载入html 尺寸,iOS WebView加载Html字符串并适应内容高度
weixin_42300435的博客
05-31 388
最后使用的是UIWebView，解决了两个问题1：开始使用的WKWebView，发现WKWebView加载的html字符串文字要比正常的小很多，找了几个办法都没有解决，因此只能换成了UIWebView2：换了后这次文字倒是正常了，但是图片又不能完整显示在WebView里，后来找到JS方法在WebView加载完后调用，才解决这里贴一下主要代码- (void)webViewDidFinishLoad:...
android webview 设置内容高度自适应,Andorid WebView内容自适应并改变图片大小
weixin_42500374的博客
05-25 577
关键部分：webview.loadUrl("javascript:varimgs=document.getElementsByTagName('img');for(vari=0;i需要在加载的HTML中在标签中加入这句话，用于页面适应手机屏幕;loadUrl函数是通过模拟a标签跳转时的时候调用JS脚本，以完成注入的目的；测试HTML内容代码：...
iOS开发之解决WebView自适应内容高度
hbblzjy的博客
06-21 2764
这段时间写的项目中，有涉及到根据后端上传的表单内容，然后在移动端将内容排版重新展示的功能点，所以小小的写一下解决办法。首先如果直接进行内容展示，或者进行sizeToFit的操作，那么可能会造成图片超过屏幕大小，字体变得很小的结果，所以这里用到了UIWebView的delegate方法和添加了html的标签语言。具体可以研究代码，如下：//web -(UIWebView *)detailWebVie
android webview自动高度_android webview设置自适应任意大小的pc网页
weixin_39738755的博客
12-21 683
WebSettingswebSettings=view.getSettings();webSettings.setJavaScriptEnabled(true);//UsersettingswebSettings.setJavaScriptEnabled(true);webSettings.setJavaScriptCanOpenWindowsAutomatically(true);we...
android webview自动高度_Android4.4以上webview自适应
weixin_34308792的博客
01-26 194
mWebview.getSettings().setDefaultTextEncodingName("utf-8");// 避免中文乱码mWebview.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);WebSettingssettings=mWebview.getSettings();settings.setJavaScriptEnabled(...
UIWebView根据内容自适应高度
孟宪亮的技术博客
04-07 870
一、webView通过内容获取高度的几个方法： 1、通过webview自带的自适应方法： CGSize size = [webView sizeThatFits:CGSizeZero]; CGFloat webViewHeight = size.height; 2、通过webView可滚动的范围获取高度 CGFloat webViewHeight = [webView.scrol
iOS UITableViewCell嵌套UIWebView 自适应高度
XLaws的博客
11-27 490
- (void)webViewDidFinishLoad:(UIWebView *)webView {     NSString * js = @"var script = document.createElement('script');"     "script.type = 'text/javascript';"     "script.text = \
iOS uiwebview 大小跟随内容自适应
woshidaniu的专栏
03-08 1849
- (void)viewDidLoad {     [super viewDidLoad];     // Do any additional setup after loading the view, typically from a nib.     NSString *str=@"jhkhkjhkjhkjhkjjhkh kjhkjhk<img src='f_stati
android webview自动高度_Android编程实现WebView自适应全屏方法小结
weixin_39713538的博客
12-21 328
本文实例讲述了Android编程实现WebView自适应全屏的方法。分享给大家供大家参考，具体如下：第一种：settings.setUseWideViewPort(true);settings.setLoadWithOverviewMode(true);第二种：WebSetting settings = webView.getSettings();settings.setLayoutAlgorit...
IOS xib webview设置高度
龙之吻T
04-20 466
1 初始化 self.webView.delegate = self; _webView.scrollView.bounces = NO; _webView.scrollView.showsHorizontalScrollIndicator = NO; _webView.scrollView.scrollEnabled = NO; [_webView sizeToFit]; 2 获取...
实现WebView内容自适应屏幕的关键代码示例
随着移动设备屏幕尺寸和分辨率的多样化，如何让WebView中的网页内容自适应屏幕成为了开发者必须面对的问题。针对这一问题，开发者们通常需要考虑几个关键点：屏幕适配、内容缩放以及响应式布局。 ### 屏幕适配 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值