一、需求描述
- 后台返回一段不完整的html字符串，如：
<img src="http://img10.360buyimg.com/imgzone/jfs/t1/118262/18/19649/117409/5f7ed2bbE9f853a48/e327e1d745e0a57a.jpg">。（当然这只是其中的一小段） - 需要使用WKWebView加载。
- 多张图片的宽度要跟屏幕宽一致。
- 要拿到WKWebView加载后的内容高度。
温馨提示：如果您需要实现的需求功能不是以上几点的，可以“alt+F4”了，江湖不远，有缘再会！
二、吐槽一下为什么写这篇文章？
- 因为本人被网上的转载博客坑了。转了N遍，代码格式都错了，问题是还有可能多了一个字符。比如，设置图片宽度的代码有这么一行
$img[p].style.width = '100%';，转载的文章居然100后面有两个“%”，坑了我。 - 网上分享的相关文章，基本都是一小段代码，想快速地尝试一下代码是否达到效果都要花时间自己去写，然后尝试去验证。
- 今天星期天，996的我想记录一下自己遇到的问题。当然能帮助到有同样需求的人会更好。
三、完整代码
//
// ViewController.swift
// Demo1024
//
// Created by lam on 2020/10/24.
//
import UIKit
import WebKit
class ViewController: UIViewController, WKNavigationDelegate {
var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .blue
/** 这是后台返回的html字符串 */
let contentString = """
<img src="http://img10.360buyimg.com/imgzone/jfs/t1/118262/18/19649/117409/5f7ed2bbE9f853a48/e327e1d745e0a57a.jpg">
"""
/**
拼接一下，拼成一个完整的html
- 1、<meta> 标签中内容的作用是禁用缩放，可以更准确拿到webview的内容高度。
- 2、“window.onload” 的作用的是遍历所有图片，统一设置图片宽度为webview的宽度。
*/
let htmlString = """
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<style type='text/css'>
body {
font-size: 15px;
}
</style>
</head>
<body>
<script type='text/javascript'>
window.onload = function () {
var $img = document.getElementsByTagName('img');
for (var p in $img) {
$img[p].style.width = '100%';
$img[p].style.height = 'auto';
}
}
</script>
<div>
\(contentString)
</div>
</body>
</html>
"""
/**
初始化，并设置webView的相关属性
- 1、设置frame高度，或设置约束高度，要尽可能的设置小一点。
*/
webView = WKWebView.init(frame: CGRect(x: 0, y: 0, width: 414, height: 20))
webView.backgroundColor = UIColor.white
webView.scrollView.showsVerticalScrollIndicator = false
webView.scrollView.bounces = false
webView.isOpaque = false
webView.navigationDelegate = self
if #available(iOS 11.0, *) {
/// 滚动视图顶部空白的问题
webView.scrollView.contentInsetAdjustmentBehavior = .never
}
view.addSubview(webView)
/** 加载 HTMLString */
webView.loadHTMLString(htmlString, baseURL: nil)
}
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
/**
网页加载完成，获取内容的高度。
- 1、想要拿到高度，webView的高度先要设置小一点，也可设置为0。
假如，一开始设置了webView的高度为700，但是内容的高度没有达到700，
此时获取到的高度肯定是700。所以要先设置小一点。
- 2、以下代码，也可以放在KVO的监听方法里面，但是KVO可能会执行多次。
didFinish这里只执行一次。具体放那里看个人需求了。
*/
let jsScrollHeight = "document.body.scrollHeight"
webView.evaluateJavaScript(jsScrollHeight, completionHandler: { (result, error) in
if result == nil { return }
if result is CGFloat {
/** 这里拿到的 result 就是高度 */
let height = result as! CGFloat
var rect = webView.frame
rect.size.height = height
webView.frame = rect
}
})
}
}
四、效果图
676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
