webView内容高度，自适应高度

最新推荐文章于 2021-06-19 01:10:01 发布
最新推荐文章于 2021-06-19 01:10:01 发布
阅读量3.2k 收藏
点赞数
分类专栏： iOS 移动开发 文章标签： UIWebView iOS TableView
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jichunw/article/details/80310414
版权

实现思路：

  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:臭码农

Andyjicw
关注
专栏目录
iOS UITableViewCell嵌套UIWebView 自适应高度
XLaws的博客
11-27 433
- (void)webViewDidFinishLoad:(UIWebView *)webView {     NSString * js = @"var script = document.createElement('script');"     "script.type = 'text/javascript';"     "script.text = \
android webview 自适应屏幕宽度,Android webview加载html自适应屏幕
weixin_32309879的博客
05-25 1300
最近又写了一篇文章 Android webview加载html代码 上下左右有白边问题可以参考一下webView.getSettings().setJavaScriptEnabled(true);webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);// 不使用缓存webView.getSettings().setUserA...
webview自适应高度
myhong的博客
03-26 1538
//自适应屏幕 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 1942
开发中，一些地方用到webView需要根据其内容的多少来动态的计算高度并且自适应。但是往往获取到的高度并不是那么的精准，以至于布局错乱。我们以往的做法是：在webView的回调方法webViewDidFinishLoad中获取网页内容高度，设置为webView的高度，调整webView布局。实际上：webViewDidFinishLoad代理方法被调用时，页面并不一定完全展现完成，可能有图片还未加...
android webview 设置内容高度自适应,React Native 根据WebView内容自动设置高度
weixin_35702486的博客
05-25 740
/*** 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 ...
webview高度自适应图文详情
leafgw的专栏
10-20 4271
private WebView webview=null; @SuppressLint("SetJavaScriptEnabled") private void initWebView(String html){ if(webview==null){ webview = new WebView(this); webview.setWebViewClient(
react-native WebView 自适应高度
XiaoZhuang__的博客
04-25 506
自适应高度，区分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.
ios 载入html 尺寸,iOS WebView加载Html字符串并适应内容高度
weixin_42300435的博客
05-31 330
最后使用的是UIWebView，解决了两个问题1：开始使用的WKWebView，发现WKWebView加载的html字符串文字要比正常的小很多，找了几个办法都没有解决，因此只能换成了UIWebView2：换了后这次文字倒是正常了，但是图片又不能完整显示在WebView里，后来找到JS方法在WebView加载完后调用，才解决这里贴一下主要代码- (void)webViewDidFinishLoad:...
webview自适应屏幕
11-29
当图片或表格过大，超出屏幕时，可以使用demo中的一些代码，解决这个问题
android webview 设置内容高度自适应,Andorid WebView内容自适应并改变图片大小
weixin_42500374的博客
05-25 528
关键部分：webview.loadUrl("javascript:varimgs=document.getElementsByTagName('img');for(vari=0;i需要在加载的HTML中在标签中加入这句话，用于页面适应手机屏幕;loadUrl函数是通过模拟a标签跳转时的时候调用JS脚本，以完成注入的目的；测试HTML内容代码：...
iOS开发之解决WebView自适应内容高度
hbblzjy的博客
06-21 2669
这段时间写的项目中，有涉及到根据后端上传的表单内容，然后在移动端将内容排版重新展示的功能点，所以小小的写一下解决办法。首先如果直接进行内容展示，或者进行sizeToFit的操作，那么可能会造成图片超过屏幕大小，字体变得很小的结果，所以这里用到了UIWebView的delegate方法和添加了html的标签语言。具体可以研究代码，如下：//web -(UIWebView *)detailWebVie
android webview自动高度_Android4.4以上webview自适应
weixin_34308792的博客
01-26 183
mWebview.getSettings().setDefaultTextEncodingName("utf-8");// 避免中文乱码mWebview.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);WebSettingssettings=mWebview.getSettings();settings.setJavaScriptEnabled(...
UIWebView根据内容自适应高度
孟宪亮的技术博客
04-07 810
一、webView通过内容获取高度的几个方法： 1、通过webview自带的自适应方法： CGSize size = [webView sizeThatFits:CGSizeZero]; CGFloat webViewHeight = size.height; 2、通过webView可滚动的范围获取高度 CGFloat webViewHeight = [webView.scrol
iOS uiwebview 大小跟随内容自适应
woshidaniu的专栏
03-08 1803
- (void)viewDidLoad {     [super viewDidLoad];     // Do any additional setup after loading the view, typically from a nib.     NSString *str=@"jhkhkjhkjhkjhkjjhkh kjhkjhk<img src='f_stati
IOS xib webview设置高度
龙之吻T
04-20 420
1 初始化 self.webView.delegate = self; _webView.scrollView.bounces = NO; _webView.scrollView.showsHorizontalScrollIndicator = NO; _webView.scrollView.scrollEnabled = NO; [_webView sizeToFit]; 2 获取...
ios html高度自适应高度,iOS WKWebView 自适应高度（底部不留白）
weixin_39559333的博客
06-19 614
解决WKWebView加载网页url或者html内容，利用document.body.offsetHeight读取内容实际高度时，底部出现大面积空白的问题。- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{[webView evaluateJavaScript:@"document...
iOS-WKWebview高度问题
qq_32644987的博客
05-15 1506
WKWebview获取高度问题-底部空白 1.注入js代码 // 提取html文件中所有图片标签，修改宽度为屏幕宽度，高度自适应 let js = "function resetImages () {" + "var imgstyle=document.getElementsByTagName('img');" + "for(var...
Flutter webView自适应高度
最新发布
05-30
要让Flutter WebView组件自适应高度，可以使用IntrinsicHeight和LayoutBuilder组件来实现。具体实现步骤如下： 1. 在WebView外面包裹一个IntrinsicHeight组件，让WebView的高度自适应它的子组件的最大高度。 2. 在WebView内部使用LayoutBuilder组件，获取WebView的实际高度，并将实际高度保存在一个变量中。 3. 将WebView的高度设置为保存的实际高度，这样WebView的高度就能够自适应了。 下面是一个示例代码： ```dart import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class MyWebView extends StatefulWidget { final String url; const MyWebView({Key key, this.url}) : super(key: key); @override _MyWebViewState createState() => _MyWebViewState(); } class _MyWebViewState extends State<MyWebView> { double _webViewHeight; @override void initState() { super.initState(); _webViewHeight = 1.0; } @override Widget build(BuildContext context) { return IntrinsicHeight( child: LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { return WebView( initialUrl: widget.url, javascriptMode: JavascriptMode.unrestricted, onPageFinished: (String url) { setState(() { _webViewHeight = double.parse( "document.documentElement.scrollHeight.toString()"); }); }, gestureNavigationEnabled: true, navigationDelegate: (NavigationRequest request) { return NavigationDecision.navigate; }, onWebResourceError: (err) { print(err); }, javascriptChannels: <JavascriptChannel>[ JavascriptChannel( name: 'Print', onMessageReceived: (JavascriptMessage message) { print(message.message); }), ].toSet(), ); }, ), ); } } ``` 在这个示例代码中，我们使用了IntrinsicHeight和LayoutBuilder组件来实现WebView的自适应高度。在布局中，我们首先将WebView包裹在一个IntrinsicHeight组件中，然后在WebView内部使用LayoutBuilder组件获取WebView的高度，并在页面加载完成后更新WebView的高度。这样，WebView就可以自适应高度了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值