如何在WebView中加载HTML代码？JS与CSS失效及类型转换问题求解

问题分析与解决方法 #

我来帮你搞定这个问题！你遇到的情况其实挺常见的，咱们一步步来拆解解决：

一、为什么loadHTMLString只显示纯文本？ #

loadHTMLString本身是支持JavaScript和CSS的，问题大概率出在WebView的配置没开启JS支持，或者baseURL设置不当导致资源加载失败。

修复步骤：

1. 先给WKWebView配置开启JavaScript支持，必要时允许本地资源访问：

import WebKit

// 创建WebView配置
let webConfig = WKWebViewConfiguration()
webConfig.preferences.javaScriptEnabled = true // 必须开启JS支持
webConfig.preferences.javaScriptCanOpenWindowsAutomatically = true // 可选，允许JS弹窗类操作
// 如果你的HTML里引用了本地资源（比如本地CSS/JS文件），需要开启文件访问权限
webConfig.setValue(true, forKey: "allowFileAccessFromFileURLs")

// 用配置初始化WebView
let webView = WKWebView(frame: view.bounds, configuration: webConfig)
view.addSubview(webView)

2. 调用loadHTMLString时，合理设置baseURL：
   • 如果HTML是纯内联的（CSS/JS都写在HTML字符串里），baseURL可以设为nil；
   • 如果HTML里引用了本地资源（比如./style.css），把baseURL设为Bundle.main.bundleURL，让WebView能找到本地文件路径。

示例代码：

// 你的HTML字符串（带内联CSS和JS）
let htmlCode = """
<!DOCTYPE html>
<html>
<head>
    <style>
        body { background: #f0f0f0; padding: 20px; }
        .title { color: #2c3e50; font-size: 24px; }
    </style>
    <script>
        window.onload = function() {
            document.querySelector('.title').textContent += ' ✨';
        };
    </script>
</head>
<body>
    <h1 class="title">Hello WebView</h1>
    <p>This is a test with CSS and JS</p>
</body>
</html>
"""

// 加载HTML
webView.loadHTMLString(htmlCode, baseURL: Bundle.main.bundleURL)

二、解决load()方法的String转Data错误 #

WKWebView的load(_ data: Data, mimeType: String, characterEncodingName: String, baseURL: URL)方法需要传入Data类型，你只需要把HTML字符串转成UTF-8编码的Data即可：

示例代码：

guard let htmlData = htmlCode.data(using: .utf8) else {
    print("Failed to convert HTML string to Data")
    return
}

// 调用load方法加载Data
webView.load(htmlData, mimeType: "text/html", characterEncodingName: "utf-8", baseURL: Bundle.main.bundleURL)

注意事项 #

• 尽量使用WKWebView而不是废弃的UIWebView，前者性能和兼容性更好；
• 如果你的HTML里引用了远程资源（比如CDN的CSS/JS），确保App的网络权限正常（在Info.plist中配置NSAppTransportSecurity，允许HTTP资源或者指定域名）。

内容的提问来源于stack exchange，提问作者Sanket P