如何在WKWebView中添加HTML和CSS代码？页面显示异常求助

问题根源 #

你的代码存在几个关键问题导致页面无法正常显示：

• HTML结构不完整：DOCTYPE声明错误（正确应为<!DOCTYPE html>），且多个标签未闭合（如</body>、</html>及嵌套的div），浏览器无法正确解析DOM结构。
• 本地资源引用风险：bootstrap.css、app_logo2.png等本地文件若未正确加入项目Bundle，或路径错误，会导致样式、图片加载失败。
• 未处理特殊字符：直接插入\(strCName)等变量，若变量包含<、&等HTML特殊字符，会破坏页面结构。
• 缺少正确的baseURL配置：加载本地HTML字符串时，需指定资源基准路径，否则WebView无法定位本地文件。

修正步骤与代码 #

1. 补全并修正HTML结构，同时处理变量转义
   先实现HTML特殊字符转义方法，避免变量破坏页面结构：

func htmlEscape(_ string: String) -> String {
    return string
        .replacingOccurrences(of: "&", with: "&")
        .replacingOccurrences(of: "<", with: "&lt;")
        .replacingOccurrences(of: ">", with: "&gt;")
        .replacingOccurrences(of: "\"", with: "&quot;")
        .replacingOccurrences(of: "'", with: "&#39;")
}

// 对变量进行转义
let escapedName = htmlEscape(strCName)
let escapedPhone = htmlEscape(phoneNo)
let escapedAddress = htmlEscape(strCAddress)
let escapedEmail = htmlEscape(strEmail)

// 修正后的HTML字符串
let strWebView = """
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Index</title>
    <link href="bootstrap.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
    <div class="">
        <div class="">
            <div class="container pdf-wrapper">
                <div class="page-breck">
                    <div class="row">
                        <div class="col-xs-4">
                            <div class="pdf-top-middle">
                                <img src="app_logo2.png" width="400rem" class="center">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 col-xs-5">
                            <p class="contactLft">
                                <b>Name</b> \(escapedName)<br>
                                <b>Phone</b> \(escapedPhone)<br>
                                <b>Street Address</b> \(escapedAddress)
                            </p>
                        </div>
                        <div class="col-md-6 col-xs-7 text-center">
                            <p class="contactMidText">
                                <b>Subterranean Termite Control/Treatment <br>
                                Retreat and Repair Coverage</b><br>
                                <b>Email</b> \(escapedEmail)
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
"""

2. 正确配置WKWebView加载逻辑
   加载HTML时指定Bundle资源路径作为baseURL，确保WebView能找到本地文件：

import WebKit

// 创建WKWebView实例并添加到视图
let webView = WKWebView(frame: view.bounds)
view.addSubview(webView)

// 获取项目Bundle的资源路径
guard let baseURL = Bundle.main.resourceURL else {
    print("无法获取资源路径")
    return
}

// 加载处理后的HTML内容
webView.loadHTMLString(strWebView, baseURL: baseURL)

3. 本地资源检查

• 将bootstrap.css、styles.css、app_logo2.png、js/bootstrap.js添加到Xcode项目，并确保在Target Membership中勾选当前目标。
• 确认js文件夹的嵌套结构与代码中路径一致（如js/bootstrap.js对应项目内js目录下的文件）。

内容的提问来源于stack exchange，提问作者Abhijnan Maji