在iOS中加载HTML代码块，可通过WKWebView的loadHTMLString方法实现，将HTML字符串加载为网页内容显示在应用内视图上。
核心方法及实现步骤
使用 WKWebView（推荐方案）
WKWebView 是 Apple 官方推荐的高性能 Web 视图，支持现代 HTML/CSS/JavaScript,内存管理更优。
实现步骤：
import WebKit
class HTMLViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let webView = WKWebView(frame: view.bounds)
view.addSubview(webView)
// 加载 HTML 字符串
let htmlString = """
<html>
<body style="font-family: -apple-system; padding: 20px;">
<h1>标题</h1>
<p>这是一段 <strong>加粗文字</strong></p>
<img src="https://example.com/image.jpg" width="100%">
</body>
</html>
"""
webView.loadHTMLString(htmlString, baseURL: nil)
}
}
关键配置：
- 加载本地资源：通过
baseURL参数指定资源目录：let bundleURL = Bundle.main.bundleURL webView.loadHTMLString(htmlString, baseURL: bundleURL)
- 启用 JavaScript（默认开启）：
let preferences = WKPreferences() preferences.javaScriptEnabled = true let config = WKWebViewConfiguration() config.preferences = preferences let webView = WKWebView(frame: .zero, configuration: config)
使用 UITextView（轻量级 HTML 渲染）
适合纯文本+基础格式（如加粗、斜体），复杂 HTML 或图片支持有限。
实现步骤：
let textView = UITextView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
let htmlString = "<p>Hello <b>World</b></p>"
// 转换 HTML 为 NSAttributedString
if let data = htmlString.data(using: .utf8) {
let options: [NSAttributedString.DocumentReadingOptionKey: Any] = [
.documentType: NSAttributedString.DocumentType.html,
.characterEncoding: String.Encoding.utf8.rawValue
]
if let attributedString = try? NSAttributedString(data: data, options: options, documentAttributes: nil) {
textView.attributedText = attributedString
}
}
限制说明：
- 不支持
<iframe>、<video>等复杂标签。 - CSS 样式兼容性较差（建议内联样式）。
安全与性能优化
-
防范 XSS 攻击
- 对用户生成的 HTML 内容进行过滤：
// 使用 WKContentRuleList 限制危险标签 let rules = """ [{ "trigger": { "url-filter": ".*" }, "action": { "type": "block" } }] """ WKContentRuleListStore.default().compileContentRuleList( forIdentifier: "SecurityRules", encodedContentRuleList: rules ) { list, error in guard let list = list else { return } webView.configuration.userContentController.add(list) } - 推荐后端预先清理 HTML 标签。
- 对用户生成的 HTML 内容进行过滤：
-
- 预加载 WKWebView 并复用实例。
- 限制复杂 JavaScript 执行（需测试页面响应速度）。
- 使用
webView.navigationDelegate监控加载状态,添加加载进度条。
-
自适应布局
- 动态调整 WKWebView 高度（通过 JavaScript 获取内容高度）：
webView.evaluateJavaScript("document.body.scrollHeight") { height, _ in if let height = height as? CGFloat { webView.frame.size.height = height } }
- 动态调整 WKWebView 高度（通过 JavaScript 获取内容高度）：
方案选择建议
| 场景 | 推荐方案 | 原因 |
|---|---|---|
| 完整网页/复杂交互 | WKWebView | 支持所有 HTML5 特性 |
| 简单富文本（无图片） | UITextView | 轻量级、渲染快 |
| 需兼容 iOS 8.x | UIWebView（已废弃） | 仅旧项目临时使用 |
废弃警告：
UIWebView自 iOS 12 起被标记为废弃,新项目禁止使用。
常见问题解决
- 中文乱码：
- 在 HTML 中指定编码：
<meta charset="utf-8">
- 在 HTML 中指定编码：
- 图片加载失败：
- 确保
baseURL指向正确资源路径。 - 使用 HTTPS 链接（iOS 默认屏蔽 HTTP 混合内容）。
- 确保
- 空白页面：
- 检查 HTML 语法错误（如未闭合标签）。
- 主线程更新 UI。
最佳实践预处理**：移除冗余 CSS/JS 以减少加载时间。
- 离线支持：将 HTML 资源打包到 App Bundle，通过
Bundle.main.path(forResource:)加载。 - 隐私合规：若加载第三方内容,需在隐私声明中告知用户。
引用说明：
- 苹果官方文档：
WKWebView,
NSAttributedString.HTML - 安全规范：OWASP XSS 防护手册
- 性能优化：WWDC 2018 – WKWebView 详解
基于 iOS 15+ 和 Swift 5.5,实际开发请根据项目环境调整。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/33329.html
