webview 文本 自适应 高度

最新推荐文章于 2023-08-09 21:17:37 发布
最新推荐文章于 2023-08-09 21:17:37 发布
阅读量768 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： iOS-webview 文本 自适应 高度 文章标签： ios webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sun_Winter/article/details/41349507
在iOS开发中，使用UIWebView加载网页内容时，通过 webViewDidFinishLoad 方法，结合 JavaScript 计算 document.body.offsetHeight 来获取网页内容的实际高度，并设置为 webview 的高度，实现文本内容的自适应布局。

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

第一种方法：  
  1. - (void)webViewDidFinishLoad:(UIWebView *)webView  
  2. {  
  3.     CGFloat height = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"] floatValue];  
  4.     CGRect frame = webView.frame;  
  5.     webView.frame = CGRectMake(frame.origin.x, frame.origin.y, frame.size.width, height);  
  6. }
第二种方法：
-(void)webViewDidFinishLoad:(UIWebView *)webView{
    CGFloat webViewHeight=[webView.scrollView contentSize].height;
    CGRect newFrame = webView.frame;
    newFrame.size.height = webViewHeight;
    webView.frame = newFrame;
}
【注】：第一种方法不知道为什么计算出来的高度总是少大约10-20的距离；
flutter 与WebView相关的需求整理（推荐）
智玲君
03-16 1170
前言 在一款app的开发中，或多或少都离不开要加载H5页面，例如隐私政策，服务协议等页面的加载，或是HTML类型的富文本数据的显示，并且当富文本之中存在超链接的时候，默认情况下点击会跳转打开对应的外部网页，但有时我们并不想在用户点击时显示超链接对应的web页面，而是拦截跳转，打开app内指定的某个页面，又或者是app中新推出一项活动时，先跳转到某个活动的H5页面，然后当用户在H5页面点击了某个按钮后，又打开app内的某个页面，即涉及到H5和Flutter之间的交互，基于以上这些常见的需求，本篇文章将系统的讲
简单的WebView自适应并嵌套在ScrollView里
热门推荐
Dev Blog
04-17 3万+
转至 ： http://solo.farbox.com/blog/simple-webview-adaptive WebView in ScrollView中文乱码Auto ScaleEnd 因为某种原因，我们总是需要展示一些复杂的文本，Html.fromHtml()已经不能满足我们的需求，比如后台可编辑的文本在前端显示起来比较吃力，所以为了解决一些复杂的文本显示就需要
webview自适应高度
myhong的博客
03-26 1612
//自适应屏幕 webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL); // 自适应 屏幕大小界面 webSettings.setLoadWithOverviewMode(true); ...
webview高度自适应
Nvermore_的博客
02-28 632
-(void)webViewDidFinishLoad:(UIWebView *)webView { //获取页面高度（像素） NSString * clientheight_str = [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight"]; float clientheigh
UIWebView 实现自适应高度
xuejunrong的博客
02-29 463
UIWebView加载本地html文件，要做到自适应高度，以满足视图其他控件对它的位置的依赖，比如webView 下面还有两个button, button的frame要根据webView的实际高度来计算，实现方法即可以调用webView代理方法， 有以下4种方法： 方法1：获取webview中scrovllview的contentsize进行设置 #pragma mark - webV
webview高度自适应图文详情
leafgw的专栏
10-20 4369
private WebView webview=null; @SuppressLint("SetJavaScriptEnabled") private void initWebView(String html){ if(webview==null){ webview = new WebView(this); webview.setWebViewClient(
Swift开发：优化cell内Webview自适应高度的实现方法
资源摘要信息:"Swift开发中的webView自适应高度加载于cell上的实现方法" 知识点： 1. **Swift开发基础**：Swift是一种由苹果公司开发的强类型、编译型的编程语言。Swift拥有简洁的语法和先进的特性，适用于iOS, ...
Flutter之WebView加载html字符串及高度自适应
m0_69656288的博客
05-29 1664
插件来加载HTML字符串，并实现WebView的高度自适应。在这个示例中，我们将HTML字符串转换为数据URL，并将其作为WebView的初始URL。希望这些示例代码能帮助你实现WebView加载HTML字符串和高度自适应的功能！现在，我们来看一下如何实现WebView的高度自适应。插件将HTML字符串转换为Flutter小部件，然后使用。参数来设置初始状态的WebView高度。小部件来获取父级约束。在Flutter中，你可以使用。参数指定数据的MIME类型，在这个示例中，我们使用。小部件，并在其中使用。
Android开发中ScollView 嵌套 WebView 底部高度无法自适应解决
燚轩软件科技
04-01 558
最近要做一个页面，需要 ScrollView 嵌套 WebView，怎么嵌套，怎么解决焦点和 touch 事件冲突，网上一大堆，这里就不赘述了，但是发现 WebView 从一个高度很高的网页加载一个高度很低的网页的时候，高度无法自适应了，造成底部会有一大片的空白，下面郑州app开发公司燚轩科技来分享一下我们的解决方案。 JS 注入，获取页面内容高度，设置成 WebView 高度 JS 注入，通...
WKWebVIew 内容文字自适应
鸵鸟外星人是水怪的博客
03-09 1463
- (void)viewDidLoad { [super viewDidLoad]; self.title = @"FAQ"; NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('con
WebView高度自适应方案探究
乂星人
04-14 6565
Android项目开发中针对webview避免不了混合开发模式，可Android上的webview又很不争气，几乎每个Android版本都有webvie的改动，在国内这种鱼龙混杂环境下出乎意料的问题又很多，这次就谈谈webview高度自适应的问题。 问题 在Android开发生涯中想必大家都遇到过，webview在有些时候展示不完整，在某些时候底部有一片空白，有些时候始终又滑不到底。。。导致这个...
webView自适应实际内容高度的问题
leafgw的专栏
10-20 3404
问题描述： 项目详情要用h5展示，加载webView，高度不确定，需要根据webView的内容高度去设置。webView可以在加载完成时获取到网页内容高度，然后再去改变webView的frame即可。 - (void)webViewDidFinishLoad:(UIWebView *)webView { float height = webView.scrollView.contentSi
react-native-webview 高度，高度自适应
m0_64182641的博客
08-09 865
RN(react-native),react-native-webveiw高度自适应
WebView内容自适应
angyunlin5641的博客
03-11 298
WebView内容自适应 webview页面自适应 //适应内容大小 start webSetting.setUseWideViewPort(true); webSetting.setLayoutAlgori...
webview自适应
whx060900的博客
04-24 390
webView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
html webview 自适应大小,ios webview自适应实际内容高度5种方法
weixin_39774490的博客
06-07 705
有的时候会碰见类似的苦逼需求， webview自适应实际内容高度 下面有四种方法供使用方法1 获取webview中scrovllview的contentsize进行设置Objective-C-(void)webViewDidFinishLoad:(UIWebView *)webView{CGFloat webViewHeight=[webView.scrollView contentSize].h...
解决WebView高度不能自适应内容
qq_36113746的博客
07-14 392
webview高度自动变化
Web前端入门（十二）CSS文本属性
treesorshining的博客
06-13 908
总目录 表示 属性值 预定义的颜色值 red，green，blue，pink等 十六进制 #FF0000, #FF6600，#29D794 RGB代码 rgb（255，0，0） 或rgb(100%，0%，0%) 注：实际开发中，最常用的是十六进制的写法、 属性值 解释 left 左对齐（默认） right 右对齐 center 居中对齐 注：是让盒子里面的文本内容水平居中， 而不是让盒子居中对齐 属性值 描述 none 默认，没有装饰
Flutter webView 页面自适应高度
05-30
要实现 Flutter WebView 页面自适应高度，可以使用 flutter_webview_plugin 插件。该插件提供了一个 onStateChanged 回调函数，可以监听 WebView 页面的状态改变。当页面加载完成后，可以获取 WebView 页面的高度，并将其应用到 WebView 上，从而实现自适应高度。 以下是一个简单的示例代码，演示如何实现 Flutter WebView 页面自适应高度： ```dart import 'package:flutter/material.dart'; import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; class MyWebView extends StatefulWidget { final String url; MyWebView({required this.url}); @override _MyWebViewState createState() => _MyWebViewState(); } class _MyWebViewState extends State<MyWebView> { double webViewHeight = 100.0; @override Widget build(BuildContext context) { return Scaffold( body: Container( height: webViewHeight, child: WebviewScaffold( url: widget.url, withZoom: false, withJavascript: true, withLocalStorage: true, hidden: true, initialChild: Container( color: Colors.white, child: Center( child: CircularProgressIndicator(), ), ), appBar: AppBar( title: Text('WebView Demo'), ), onStateChanged: (state) { if (state.type == WebViewState.finishLoad) { setState(() { webViewHeight = double.parse(state.height.toString()); }); } }, ), ), ); } } ``` 在上面的代码中，我们定义了一个 MyWebView 类，使用 WebviewScaffold 来渲染 WebView 页面。在 onStateChanged 回调函数中，我们监听 WebView 页面的状态改变，并在页面加载完成后获取 WebView 的高度，并将其应用到 WebView 上。这样，就可以实现 WebView 页面的自适应高度了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值