iOS -- WKWebView + KVO 方式获取Web的高度(非js)

本文介绍如何使用WKWebView获取网页的真实高度,并对比UIWebView,强调WKWebView的优势:内存占用少、支持更多HTML5特性、高性能滚动刷新率等。通过具体代码示例展示了KVO监听的应用。

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

随着项目中的web页加载越来越多。UIWebView使用的频率也越来越多,之前也没有过多的研究。总结一下:
UIWebView 是从iOS2开始的,WKWebView是从iOS8才有,WKWebView的出现使得UIWebView慢慢被取代,原因是: UIWebView占用过多内存,而且峰值很高,WKWebView相对于UIWebView所占的内存少了很多。而且也加了一些特性:

        1.更多的支持HTML5的特性
        2.官方宣称的高达60fps的滚动刷新率以及内置手势
        3.Safari相同的JavaScript引擎
        4.将UIWebViewDelegate与UIWebView拆分成了14类与3个协议(官方文档说明)
        5.另外用的比较多的,增加加载进度属性:estimatedProgress

本篇文章,只说怎么用WKWebView获取web的真实高度。国际惯例,代码先行。

1.创建WKWebView + 头文件
这里写图片描述

这里写图片描述
如果不用kVO监听高度,则返回的高度不真实。(测试可知)

2.WKWebView代理
这里写图片描述

3.KVO方法
这里写图片描述

4.移除监听
这里写图片描述

注:1.在监听方法中,有几个参数,keyPath是你监听的属性,如果你监听的属性多了,就要通过这个参数进行区分。
   2.在监听方法中,可以直接通过[_myWebView.scrollView contentSize].height去获取精确高度。我写的demo中,是想试一下从change参数中取高度。但是没有第一种方便。原因我会在下一篇博客里说明。涉及到NSConcreteValue类型的转换。不过也成功了。
   3.KVO的监听一定要移除,否则项目会崩溃。

之后想在web下面加原生代码,就正常发挥即可。

本demo是WKWebView的基本使用和交互 ,实现了原生调用js的方法、js调用原生的方法、通过拦截进行交互的方法;修改内容 加入沙盒 / /加载沙盒 不带参数 // NSArray * paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); // NSString * path = [paths objectAtIndex:0]; // path = [path stringByAppendingString:[NSString stringWithFormat:@"/app/html/index.html"]]; // NSURL *url = [NSURL URLWithString:[[NSString stringWithFormat:@"file://%@",path] stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLFragmentAllowedCharacterSet]] relativeToURL:[NSURL fileURLWithPath:NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES).firstObject]]; // [self.wkView loadFileURL:url allowingReadAccessToURL:[NSURL fileURLWithPath: [paths objectAtIndex:0]]]; // 带参数 /* NSArray * paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); NSString * path = [paths objectAtIndex:0]; path = [path stringByAppendingString:[NSString stringWithFormat:@"/app/html/index.html"]]; NSURL * url = [NSURL fileURLWithPath:path isDirectory:NO]; NSURLComponents *urlComponents = [NSURLComponents componentsWithURL:url resolvingAgainstBaseURL:NO]; [queryItemArray addObject:[NSURLQueryItem queryItemWithName:@"version" value:[[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleShortVersionString"]]]; [urlComponents setQueryItems:queryItemArray]; [self.wkView loadFileURL:urlComponents.URL allowingReadAccessToURL:[NSURL fileURLWithPath: [paths objectAtIndex:0]]]; */
### iOS18 中 WKWebView 加载 HTML 出现白屏的解决方案 在 iOS18 的环境中,WKWebView 可能由于多种原因导致加载 HTML 页面时出现白屏的情况。以下是针对该问题可能的原因分析以及对应的解决方案。 #### 1. **监听 `webViewWebContentProcessDidTerminate` 方法** 当 WKWebViewWeb Content Process 被终止时,可能会触发白屏现象。此时可以重写 `webViewWebContentProcessDidTerminate:` 方法并重新加载页面: ```objective-c - (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView { [webView reload]; } ``` 这种方法适用于因内存不足或其他异常情况导致的 Web Content Process 终止场景[^2]。 --- #### 2. **监控 webView 的 title 属性变化** 部分情况下,WKWebView 白屏的同时其 `title` 属性会被清空。因此可以通过 KVO 或者其他方式监听 `title` 属性的变化来检测白屏状态,并采取相应措施: ```objective-c [self.webView addObserver:self forKeyPath:@"title" options:NSKeyValueObservingOptionNew context:nil]; - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context { if ([keyPath isEqualToString:@"title"] && (!self.webView.title || self.webView.title.length == 0)) { NSLog(@"Detected blank screen, reloading..."); [self.webView reload]; } } ``` 此方法能够有效应对某些特定类型的白屏问题[^3]。 --- #### 3. **利用 WKNavigationDelegate 协议跟踪加载过程** 通过实现 `WKNavigationDelegate` 协议中的方法,可以更全面地了解页面加载的状态。特别是以下两个方法可以帮助捕获加载失败的信息: ```objective-c - (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(nonnull NSError *)error { NSLog(@"Failed to load page provisionally: %@", error.localizedDescription); } - (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(nonnull NSError *)error { NSLog(@"Failed to load page completely: %@", error.localizedDescription); } ``` 如果发现错误码为 `-1004`(网络连接中断)或者 `-999`(请求取消),可以根据具体需求决定是否尝试重新加载页面[^5]。 --- #### 4. **检查 Cordova 插件配置** 如果你的应用基于 Apache Cordova 构建,则需要确认插件路径是否正确设置。此外,在启用 WKWebView 支持后,需调整应用支持的最低 iOS 版本至 9+,否则可能导致兼容性问题引发白屏: ```javascript // 修改 cordova_plugins.js 文件中各插件路径 { "file": "../path/to/plugin/file", ... } ``` 同时更新项目的部署目标版本号: ```xml <!-- 在 config.xml 中 --> <preference name="deployment-target" value="9.0"/> ``` 这些改动有助于减少由插件引起的潜在冲突[^4]。 --- #### 5. **优化资源加载逻辑** 对于动态生成的内容或外部依赖较多的网页,建议预加载必要的 CSS 和 JavaScript 文件;另外还可以考虑引入缓存机制以提高性能稳定性。例如使用 Service Worker 缓存静态资产或将重要数据存储到本地数据库 SQLite/LiteDB 等位置供离线访问。 --- #### 总结 综合以上策略可极大程度降低 iOS18 下 WKWebView 遇见白屏的概率。实际开发过程中应结合具体情况逐一排查根本原因再施加针对性修复手段。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值