wkwebview 通过scrollHeight 获取的实际高度不准确

最新推荐文章于 2023-07-26 16:30:59 发布
原创 最新推荐文章于 2023-07-26 16:30:59 发布 · 8.7k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webview

本文讨论了在移动端使用WKWebView加载富文本时，因内容未按屏幕设备缩放导致滚动高度不准确的问题。文章通过示例代码展示了如何通过添加meta标签和处理img元素来确保高度正确适应移动端。

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

需求

移动端使用webview加载后端返回的富文本，当在移动端点击查看全部的时候，全部显示。

示例

这里写图片描述
这里写图片描述

示例代码


    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

      webView.evaluateJavaScript("document.body.scrollHeight") { (value, error) in

     LLog(value);
     self.currentHeight = CGFloat(value
最低0.47元/天 解锁文章

200万优质内容无限畅学
获取 WKWebView 高度
优快云博客
01-09 1038
1、这种方法只能在网页加载完成后调用一次，如果网页中有图片异步加载出来，则不会调用。 //页面加载完成之后调用 - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation { // document.body.scrollHeight（加载HTML源站用这个） document.body.offsetHeight;(加载HTML字符串) [webView eval
vue3中onMounted获取元素高度不准确
DN金猿的博客
07-26 829
设个定时器，在页面挂载完1秒后再获取高度，就获取到实际高度了，但是有一点，页面体验感不是很好，而且偶尔也会出现获取值不准确现象。如果你有更好的解决方案，可以在下方评论区留言。以上数据可以通过打印ref实例和ref.value.offersetHeight查看。页面元素和页面资源未完全渲染与加载完，就获取高度，导致获取不准确。
ios-获取WKWebView加载完成之后的高度.zip
07-11
获取WKWebView的高度，注意在控制器 销毁后，为防止内存泄漏，需要将WKUserContentController *userCC = self.wkConfig.userContentController; //JS调用OC 添加处理脚本 [userCC addScriptMessageHandler:self name:@"jsCallOC"]; 的代理置位空
WKWebView高度获取不准解决办法
码农天后的博客
01-18 1125
一般APP会在详情页下面原生拼接例如：评论或展示的Cell 很多人遇到WKWebView高度获取不准确，例如：下面一片空白，高度一直在增加，上拉刷不动，各种问题。 获取高度一般用kvo或者js，我是使用kvo监听。 获取不到高度，换下URL，百度什么的试试，先排除下。 我的做法，代码是没问题的，试了几个URL，也正常加载出来，只有公司URL有问题，与H5讨论下，问题描述完告诉我，高度塌陷。 H5这边只改了几句代码，我再测试，完美加载。 贴下H5改的代码 此图的高度是正确的 页面查看的高度，不
iframe自适应高度 document.body.scrollHeight取值不对
CHOUFENGDDDDDD的博客
01-07 5813
springmv 切换iframe 时发现直接修改iframe src 或者使用 location.href = "“时不起作用 之后才有form 标段提交 在control中返回新网页的地址 才完成了网页切换   之后iframe自适应高度有出现了问题 子页面中使用document.body.scrollHeight获取的高度值不对   在iframe引用的前一个页面的高度比ifra...
WKWebView高度获取不准确，解决办法
weixin_39851592的博客
11-01 4739
WKWebView高度获取不准确，解决办法 一般APP含有详情页，目前主流做法，上面放个WKWebView(iOS8之后)，下面原声拼接(评论或展示的Cell). 很多人遇到WKWebView高度获取不准确，例如问题：下面一片空白，高度一直在增加，上拉刷不动，各种问题。 获取高度一般用kvo或者js,我是使用kvo监听. 获取不到高度，换下URL，百度什么的试试,先排除下。 我的做法，代码是没问题...
webview document.body.scrollHeight 获取的高度不准确
XiaoZhuang__的博客
05-28 1370
解决方案 1、给富文本加上meta标签 适配移动端 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 2、我们对img进行处理 <style type="text/css"> img{ display: inline-block; max-width: 100%; } </style&gt
解决vue项目获取dom元素宽高总是不准确问题
10-15
然而，在实际操作中，可能会遇到获取的宽高不准确的问题，特别是在数据动态更新后。这个问题通常源于DOM元素尚未完成渲染，导致获取的尺寸信息不正确。 在描述中提到，当重置数据后直接通过`this.$refs.editor[0]....
ios-计算WKWebview的实际高度.zip
07-11
标题中的“ios-计算WKWebview的实际高度.zip”提供了一个解决方案，通过观察者模式来动态计算WKWebView的高度，以避免出现高度计算不准确的问题。 WKWebView的默认行为是其高度会自适应内容，但有时由于网络延迟、...
页面滚动组件scroll不能正确获取高度的问题如何解决
abc942857321的博客
11-26 1560
图一： 图二： 图二源码的页面显示为图一，在这里有一个获取到数据后，scroll有时滚动高度不正确的问题。在这个滚动中有两部分内容，第一部分是slider焦点图区域，第二部分是热门歌单推荐列表部分，这两部分的数据内容分别从两个接口中获取，因为网络速度的原因，所以接口获取数据的速度不一致，而且先后也存在不确定性，如果第一部分的数据先获取，页面先渲染，那么页面高度不会存在什么问题...
JS获取scrollHeight问题想到的标准问题
10-30
如果没有文档声明可以用 document.body.scrollHeight,如果有文档声明必须用 document.documentElement.scrollHeight关于这方面的东西
iOS11 WKWebview获取高度不准确问题
zhaotao0617的博客
10-18 5072
遇见这个问题的时候，我发现偏离了大概64像素，由此联想到了tableView和collectionView。 故解决办法如下： if (@available(iOS 11.0, *)) {         _webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNe
html5 scrollheight,scrollHeight和scrollWidth，获取网页内容高度和宽度不正确
weixin_42300121的博客
06-19 768
问题如下图所示，高度明显不正确，请问问题出在哪，希望能给出详细解释。另外，希望能再具体解释下document.documentElement.clientHeight、window.innerHeight、document.documentElement.scrollHeight及document.body.clientHeight之间的关系，发现document.body.clientHeigh...
关于webVIew高度变化
qq_28498205的博客
12-06 596
// 注册观察者  [_wkWebView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil]; // 监测高度变化 - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:...
WKWebView遇上UIScrollView，动态获取WKWebView的高度
欢迎来到Jack的程序世界
11-20 7334
开发过程中经常会碰到这样的需求，顶部是自定义的UIView,下面是使用webView,然后实现一起滚动。需求如下图： 实现思路也简单，可以使用UIScrollView为父视图，自定义view和webView作为子视图，或者使用UITableView,自定义view作为tableHeaderView，webView添加到 UITableViewCell上。关键是如何获取高度。这里通过
解决在Firefox(<21)下获取 scroll[Width|Height] 值不正确的bug
weixin_33709219的博客
06-13 401
为什么80%的码农都做不了架构师？>>> ...
iOS WKWebView获取h5页面的实际高度
xiaoxiaobaibaicai的博客
11-27 2763
#pragma mark - observer - (void)addWebViewObserver { [self.wkWebView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil]; } - (void)removeWeb...
uniapp微信小程序scroll-view滚动scrollLeft不准确
T3165919332的博客
07-26 2854
但是这种方法会影响性能，这是因为关闭节流后,onScroll 事件会在每次滚动时触发,可以提高滚动位置监测的精确度。但需要注意的是,这会增加一定的性能消耗,如果滚动区域很大,滚动频繁,会带来较大的计算压力。所以在复杂场景下,我们还是建议保留系统的节流行为。原因：因为每次滚动监听事件都会被调用比较耗费资源系统会默认节流，可以在scroll-view 加一个。今天在实现微信小程序的一个横向导航的时候出现了一个问题，就是每次滑到滚动条最右边的时候。如果不想消耗过多性能,又想实现精确的滚动监听，怎么办？
js -- 获取浏览器高度以及clientHeight、scrollHeight、offsetHeight区别
bobobocai的博客
11-22 9043
//浏览器卷去部分高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //浏览器窗口高度，已做兼容 var winHeight; if (window.innerHeight) { winHeight = window.innerHeig
document.documentElement.scrollHeight 只能获取到一般高度
最新发布
10-12
`document.documentElement.scrollHeight` 是JavaScript中用于获取文档元素滚动区域高度的一个属性。它返回的是从视口顶部到底部的实际内容高度，包括已经被用户滚动的内容。然而，这个值并不总是等于浏览器窗口的总高度，因为可能会有滚动条、工具栏等其他非可视部分。 当仅需要获取页面可见内容的高度时，它是一个有用的工具。如果需要获取整个浏览器窗口的高度，应该加上滚动条的高度： ```javascript var windowHeight = document.documentElement.clientHeight; var scrollHeight = document.documentElement.scrollHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var totalHeight = windowHeight + scrollTop; ``` 这里`windowHeight`代表可视区域高度，`scrollHeight`是实际内容高度，`scrollTop`是滚动条的距离。总高度`totalHeight`则是两者之和。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值