在 javascript 中修改图像大小后，WKWebView 不更改 contentSize
Posted
技术标签:
【中文标题】在 javascript 中修改图像大小后，WKWebView 不更改 contentSize【英文标题】：WKWebView not changing contentSize after modify images sizes in javascript 【发布时间】：2017-06-26 14:08:08 【问题描述】：我使用带有 loadhtmlString 和 basicURL 的 WKWebView。 我观察到“scrollView.contentSize”路径的变化，并在内容大小发生变化时执行下一个代码：
if (textWebViewHeightConstraint.constant != textWebView.scrollView.contentSize.height)
CGFloat newSize = textWebView.scrollView.contentSize.height;
if (!self.currentPromo.text || self.currentPromo.text.length == 0)
newSize = 0.0;
[UIView animateWithDuration:kDefaultAnimationDuration animations:^
textWebViewHeightConstraint.constant = newSize;
[self.view layoutIfNeeded];
];
它工作正常。 但我的 html 字符串有时包含具有静态宽度和高度的大图像。
我在 didFinishNavigation 方法中修改图片尺寸：
[webView evaluatejavascript:@"var images = document.getElementsByTagName('img');"
"for(var i = 0; i < images.length; i++) "
"images[i].style.height = \"auto\";"
"images[i].style.maxWidth = window.innerWidth - kDefaultMargin * 2;"
"" completionHandler:nil];
执行此JS代码后，内容高度发生了变化，但WKWebView没有检测到这一点，也没有改变内容大小。结果，在内容结束后，我在 WKWebView 中有很大的可用空间。
我该如何解决？
谢谢。
【问题讨论】：
等等，你为什么要更改滚动视图的 contentSize 开头？ WKWebView 将为您处理此问题 我没有手动更改 scrollView 的 contentSize，我通过观察者读取了 scrollView 的 contentSize 的变化并更新了 WKWebView 高度约束。 【参考方案1】：我修好了！ 我不知道，为什么 WKWebView 内容大小不自动调整大小，但我们可以帮助他做到这一点。
如果你和我有同样的问题，你应该：
Delcare BOOL 属性
@property(nonatomic, assign) BOOL isWebViewReloaded;
并在更新视图内容方法中设置为 NO 值
self.isWebViewReloaded = NO;
NSString *wrappedText = [self.currentPromo wrappedTextForWebViewForWith:self.textWebView.bounds.size.width andText:nil];
[self.textWebView loadHTMLString:wrappedText baseURL:[ApiClient shared].baseUrl];
我的包装方法将 html 和 body 标签添加到 html 字符串
-(NSString *)wrappedTextForWebViewForWith:(CGFloat)width andText:(NSString *)text
if (!text)
text = self.text;
return [NSString stringWithFormat:
@"<html>"
"<head>"
"<meta name=\"viewport\" content=\"initial-scale=1.0\" />"
"</head>"
"<body style=\"max-width:%fpx\">"
"%@"
"</body>"
"</html>", width, text];
在 didStartProvisionalNavigation 委托方法中，您应该手动将内容大小设置为零。 这很重要，没有它的WKWebView就不能resize！
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation
webView.scrollView.contentSize = CGSizeZero;
在 didFinishNavigation 委托方法中，您应该修改已加载的文档并使用修改后的 html 重新加载 WKWebView
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation
[webView evaluateJavaScript:self.modifyImagesJS completionHandler:^(id _Nullable obj, NSError * _Nullable error)
if (!self.isWebViewReloaded)
//it is very big hack! See my question for details: https://***.com/questions/44761656/wkwebview-not-changing-contentsize-after-modify-images-sizes-in-javascript
[webView evaluateJavaScript:@"document.body.innerHTML" completionHandler:^(id _Nullable str, NSError * _Nullable error)
self.isWebViewReloaded = YES;
NSString *wrappedHTML = [self.currentPromo wrappedTextForWebViewForWith:self.textWebView.bounds.size.width andText:str];
[self.textWebView loadHTMLString:wrappedHTML baseURL:[ApiClient shared].baseUrl];
];
];
我的 isWebViewReloaded 脚本：
self.modifyImagesJS = [NSString stringWithFormat:@""
"var images = document.getElementsByTagName('img');"
"for(var i = 0; i < images.length; i++) "
"images[i].removeAttribute(\"height\");"
"images[i].style.height = \"auto\";"
"images[i].style.maxWidth = window.innerWidth - %f * 2;" // %f * 2 - сompensate left and right margins
"", kDefaultSmallBlocksMargins];
最后我使用 KVO 检测 webview 内容大小变化并修改 webview 高度约束
FBKVOController *kvo = self.KVOController;
[kvo observe:self.textWebView
keyPath:@"scrollView.contentSize"
options:NSKeyValueObservingOptionNew
block:^(id _Nullable observer, WKWebView * _Nonnull webView, NSDictionary<NSString *,id> * _Nonnull change)
if (webView.constraints.firstObject.constant != webView.scrollView.contentSize.height)
NSLog(@"new size is %f", webView.scrollView.contentSize.height);
CGFloat newSize = webView.scrollView.contentSize.height;
if (!_self.currentPromo.text || _self.currentPromo.text.length == 0)
newSize = 0.0;
[UIView animateWithDuration:kDefaultAnimationDuration animations:^
webView.constraints.firstObject.constant = newSize;
[_self.view layoutIfNeeded];
];
];
宾果游戏！！！
原始html字符串：
... <img src="/upload/someName.png" >...
修改后的html字符串
... <img src="/upload/someName.png" style="height: auto; max-width: 284px;"> ...
内容大小的变化
...[26964:10644727] new size is 2297.000000
...[26964:10644727] new size is 0.000000
...[26964:10644727] new size is 1243.000000
【讨论】：
我得到了一个很小但非常重要的指令。在 viewDidLoad 方法中，您应该添加一个高度约束。通过砌体示例：[self.newsContentWebView mas_makeConstraints:^(MASConstraintMaker *make) make.height.mas_equalTo(@0); ];以上是关于在 javascript 中修改图像大小后，WKWebView 不更改 contentSize的主要内容，如果未能解决你的问题，请参考以下文章