WkwebView调节字体大小获取高度

最新推荐文章于 2022-08-18 15:19:33 发布
最新推荐文章于 2022-08-18 15:19:33 发布
阅读量2.4k 收藏 1
点赞数 4
分类专栏： OC 界面 iOS 文章标签： WkwebView 获取高度 调节字体大小
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22157341/article/details/79278591
版权
iOS 同时被 3 个专栏收录
72 篇文章 0 订阅
订阅专栏
OC
39 篇文章 0 订阅
订阅专栏
界面
16 篇文章 0 订阅
订阅专栏

一般新闻阅读类APP都有一个功能是调节字体大小，而这类新闻界面一般是由webVIew来实现的，实际上就是怎么实时调节webView的字体大小。

写在前面

前后实验过大概有三四种方法，各有各自的优缺点，记录如下，不确保普遍适用，欢迎交流指正。

追加定位标签

<body>
	. . . 
    <!-- HTML结构 -->
    <div id="test-div">
    </div>
</body>

这个test-div标签不显示任何内容，它的作用就是作为一个锚点，我们通过获取这个锚点在webView的位置，确定webView的高度。

在webView加载完毕后执行JavaScript获取指定标签的位置

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
[webView evaluateJavaScript:@"document.getElementById(\"test-div\").offsetTop" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        CGFloat height = [result doubleValue];
        NSLog(@"scrollHeight = %f", height);
        [self.webView mas_updateConstraints:^(MASConstraintMaker *make) {
            make.height.mas_equalTo(height);
        }];
    }];
}

实际运用发现这种方法获取的高度还是蛮准确的，目前项目中采用的是这种方法。不管是字体从大调到小，还是从小调到大，都能获取到准确的高度。

修改css样式

<style type=\"text/css\"> 
	*{
	font-size:18.0px !important;
	background: #ffff32 !important;
	padding-right: 0px !important;
	padding-left: 0px !important;
	line-height: 1.7em !important
	p{
	margin-top:-5px !important;
	}
	body{
	text-align:1.2px; 
	color: #4A4A4A;
	}
</style>

只需要改变font-size:18.0px这个值，然后把html字符串重新注入WkWebView。

offsetHeight/scrollHeight

相信这个方法大家都用过

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {

    [webView evaluateJavaScript:@"document.body.offsetHeight" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        CGFloat height = [result doubleValue];
        NSLog(@"offsetHeight = %f", height);
    }];
}

这种方法有个明显缺陷是，字体从小调到大时，OK，获取的高度没问题；但是你从大调到小时发现获取的高度几乎没有任何改变，这时候再拿来用会导致底部大片留白。
换成document.body.scrollHeight结果也是一毛一样的。
后来了解到这种现象是：
字体从小到大时webView容器不够完全显示会重新排版，并更新自己的容器，此时我们拿到的高度都是准确的，但是当字体从大调到小时，webView容器足够完全显示所有内容，认为没必要去更新容器，导致我们获取的高度是之前的高度。

为了验证上面说法，我在每次html字符串重新注入之前将webView的高度置0，这时不管怎么调拿到的高度都是准确的，但是有个一闪的效果。。。

webkitTextSizeAdjust= ‘100%’"

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    
    //修改字体大小
    [ webView evaluateJavaScript:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '100%'" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        
    }];
}

这种方法也能修改字体大小，同样的，拿到的高度跟上面时一样的，从大到小底部会有大片留白

总结

比较以上几种方法，第一种方法效果还是不错的，但是总感觉追加一个定位标签可能会有什么隐患，还好目前没有?

qq_22157341
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
wkwebview 字体大小调整 网页内容高度计算
flg1554112450的博客
08-17 5853
现有一个需求，，将一个网页作为tableview的头视图，，tableview列表展示评论内容，，这就要求计算出webview的高度。。此外，，有一个字体调整大小的按钮，，选择不同大小的字体，，头视图高度要变化。。 遇到的问题，，字体有小到大，，网页高度计算没有问题，，但字体由大到小，，网页高度不变。。所以出现一大块空白。。 以下总结处理方法。。思路是字体有小到大，，不做处理，
WKWebView禁止捏合的方法
木头书屋专栏
07-27 2774
func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) { let javascript = "var meta = document.createElement('meta');meta.setAttribute('name', 'viewport');meta.setAttribute('co
iOS WKWebView设置文字和图片大小
yanPingWang_8的博客
04-28 2084
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init]; WKPreferences *preferences = [[WKPreferences alloc]init]; preferences.javaScriptCanOpenWindowsAutomatically = ...
ios wekwebview字体偏小解决
BX_Jobs的博客
08-18 543
ios wekwebview字体偏小解决
关于webVIew高度变化
qq_28498205的博客
12-06 528
// 注册观察者  [_wkWebView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil]; // 监测高度变化 - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:...
ios-获取WKWebView加载完成之后的高度.zip
07-11
获取WKWebView的高度，注意在控制器 销毁后，为防止内存泄漏，需要将WKUserContentController *userCC = self.wkConfig.userContentController; //JS调用OC 添加处理脚本 [userCC addScriptMessageHandler:self ...
iOS WKWebView和UIWebView高度自适应
04-22
本篇文章将深入探讨如何在iOS应用中实现WKWebView和UIWebView的高度自适应，确保它们能够根据加载的HTML内容自动调整视图大小。 首先，我们来看UIWebView。UIWebView是早期引入的组件，虽然简单易用，但在处理复杂...
ios webView获取高度
11-07
`ios webView获取高度`这个话题是iOS开发者经常会遇到的问题，尤其是在需要自适应布局或者进行页面滚动交互时。以下将详细介绍UIWebView以及如何获取其高度。 一、UIWebView简介 UIWebView是UIKit框架的一部分，它...
iOS WKWebView和UIWebView自适应高度
04-26
总的来说，无论是UIWebView还是WKWebView，实现自适应高度的关键在于正确地执行JavaScript代码以获取内容高度，并在适当的时候更新视图的布局。在iOS应用中，合理地利用这些技术，可以让用户获得更加流畅和自然的...
OC-WKWebView(Html修改字体颜色)
最新发布
03-09
在iOS开发中，WKWebView是WebKit框架的一部分，用于在应用程序中加载和显示Web内容。它取代了旧的UIWebView，提供了更好的性能和安全性。本文将深入探讨如何在使用Objective-C编程时，通过WKWebView来展示HTML内容，...
WebView 日夜间模式、调整字体大小
12-02
android webview加载网页，调整日夜间模式 和文字大小的HTML文档，自己保留做个笔记
iOS中精确计算WebView高度的方法示例
01-04
前言 在开发app的过程中难免会遇到将webView加载到tableView的cell上的需求，一般遇到这种问题，通常想到的思路就是在webView的回调方法webViewDidFinishLoad中获取到webView的高度,刷新tableView，将高度赋值给tableView的回调方法heightForRow。看似没有任何问题，但是在实际操作的时候却发现得到的高度并不是webView的实际高度，显然这种方法是行不通的。其实并不是方法不行，而是webViewDidFinishLoad代理方法被调用时，页面并不一定完全展现完成，可能有图片还未加载出来，导致此时获取的高度是并不是最终高度，过会
WKWebView获取内容高度
奔跑中的IT男
06-26 7578
*webView = [[UIWebView alloc] init]; [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"urlString"]]];#pragma mark - WKNavigationDelegate// 页面加载完成之后调用 此方法会调用多次 - (void)webView
iOS wkWebview调整html文字大小以及文字两端对齐
weixin_30908941的博客
06-25 688
1.问题：后台给的HTML标签字符串用wkwebview加载时需要适当增大文字大小以及将文字两端对齐 修改前效果： 修改后效果： 解决方法：文字增大在wk代理方法实现，使用js语句；文本两端对齐使用添加css样式实现 2.实现方法 代码1： #pragma mark -webView delegate - (void)webView:(WKWebView *)w...
WKWebView遇上UIScrollView，动态获取WKWebView的高度
欢迎来到Jack的程序世界
11-20 7062
开发过程中经常会碰到这样的需求，顶部是自定义的UIView,下面是使用webView,然后实现一起滚动。需求如下图： 实现思路也简单，可以使用UIScrollView为父视图，自定义view和webView作为子视图，或者使用UITableView,自定义view作为tableHeaderView，webView添加到 UITableViewCell上。关键是如何获取高度。这里通过
iOS WKWebView加载HTML字体大小问题
ANDY_GUO_wei的专栏
07-21 1508
NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"; WKUserScript *wkUScript = [...
iOS 修改WKwebView字体大小
f9999999995的博客
10-25 2945
一个代理方法就搞定了 _wkWebView.navigationDelegate = self; - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{ [ webView evaluateJavaScript:@"document.getEleme...
WebView修改文字大小、颜色，背景颜色
春天的小马扎
05-15 1903
1.第一种方式：在WebView的代理方法webViewDidFinishLoad中：字体大小： [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '12%'"];字体颜色：[webView stringByEv...
获取WebView高度的问题
delicious_d的专栏
11-18 980
今天在获取WebView高度的问题上纠结了很长时间，之前一直用下面的这一句在代理中获取高度，但是这次不管用，不知道是不是是和加载的HTMLStr类型的webView有关系 int height = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"] intValue]; 解决办法： -
wkwebview 缩放高度变化
06-09
在WKWebView中，你可以通过设置WKWebView的UIScrollView来实现缩放以及控制高度变化的效果。具体方法如下： 1. 在WKWebView的UIScrollView的代理方法中，实现缩放效果： ``` - (UIView *)...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值