ios - 在 javascript 中修改图像大小后，WKWebView 不更改 contentSize
<p><p>我使用带有 loadHTMLString 和 basicURL 的 WKWebView。
我观察到“scrollView.contentSize”路径的变化，并在内容大小发生变化时执行下一个代码:</p>
<pre><code>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;
;
}];
}
</code></pre>
<p>它工作正常。
但我的 html 字符串有时包含具有静态宽度和高度的大图像。</p>
<p>我在 didFinishNavigation 方法中修改图片尺寸:</p>
<pre><code>[webView evaluateJavaScript:@"var images = document.getElementsByTagName('img');"
"for(var i = 0; i < images.length; i++) {"
"images.style.height = \"auto\";"
"images.style.maxWidth = window.innerWidth - kDefaultMargin * 2;"
"}" completionHandler:nil];
</code></pre>
<p>执行此JS代码后，内容高度发生了变化，但WKWebView没有检测到这一点，也没有改变内容大小。结果，在内容结束后，我在 WKWebView 中有很大的可用空间。</p>
<p>我该如何解决？</p>
<p>谢谢。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>我修好了!
我不知道，为什么 WKWebView 内容大小不自动调整大小，但我们可以帮助他做到这一点。</p>
<p>如果你和我有同样的问题，你应该:</p>
<p>Delcare BOOL 属性</p>
<pre><code>@property(nonatomic, assign) BOOL isWebViewReloaded;
</code></pre>
<p>并在更新 View 内容方法中设置为 NO 值</p>
<pre><code>self.isWebViewReloaded = NO;
NSString *wrappedText = ;
.baseUrl];
</code></pre>
<p>我的包装方法将 html 和 body 标记添加到 html 字符串</p>
<pre><code>-(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];
}
</code></pre>
<p>在 didStartProvisionalNavigation 委托(delegate)方法中，您应该手动将内容大小设置为零。 <strong>这很重要，没有它的WKWebView就不能resize!</strong></p>
<pre><code>- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation {
webView.scrollView.contentSize = CGSizeZero;
}
</code></pre>
<p>在 didFinishNavigation 委托(delegate)方法中，您应该修改已加载的文档并使用修改后的 html 重新加载 WKWebView</p>
<pre><code>- (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://stackoverflow.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 = ;
.baseUrl];
}];
}
}];
}
</code></pre>
<p>我的 isWebViewReloaded 脚本:</p>
<pre><code>self.modifyImagesJS = [NSString stringWithFormat:@""
"var images = document.getElementsByTagName('img');"
"for(var i = 0; i < images.length; i++) {"
"images.removeAttribute(\"height\");"
"images.style.height = \"auto\";"
"images.style.maxWidth = window.innerWidth - %f * 2;" //%f * 2 - сompensate left and right margins
"}", kDefaultSmallBlocksMargins];
</code></pre>
<p>最后我使用 KVO 检测 webview 内容大小变化并修改 webview 高度约束</p>
<pre><code>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;
;
}];
}
}];
</code></pre>
<p><strong>宾果游戏!!!</strong></p>
<p>原始html字符串:</p>
<pre><code>... <img width="600" src="/upload/someName.png" height="2001">...
</code></pre>
<p>修改后的html字符串</p>
<pre><code>...<img width="600" src="/upload/someName.png" style="height: auto; max-width: 284px;"> ...
</code></pre>
<p>内容大小的变化</p>
<pre><code>... new size is 2297.000000
... new size is 0.000000
... new size is 1243.000000
</code></pre></p>
<p style="font-size: 20px;">关于ios - 在 javascript 中修改图像大小后，WKWebView 不更改 contentSize，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/44761656/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/44761656/
</a>
</p>
页:
[1]