WKWebView：如何在加载本地 html 时将文本插入 HTML

Question

当使用 WKWebView 加载本地 HTML 文件（不是 on-line 资源）时，我需要传入一些变量。标题索引完全由最后一个 tableView 索引路径确定页面，如下图

我似乎遇到了 css 问题：

还有什么办法可以处理吗？

喜欢Java的模板语法或Python的Jinja2语法。

这里是 html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <h3>
            如何查询我购买的订单？
        </h3>
        <p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
        </p>
    </div>
</body>
</html>

要插入的 <h3> 标签的内容

Answer 1

如果您可以完全控制 HTML 文件，您可以在要插入值的位置插入一个占位符：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
                    <title>Document</title>
    </head>
    <body>
        <div>
            <h3>
                @@index@@ 如何查询我购买的订单？
            </h3>
            <p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
            </p>
        </div>
    </body>
</html>

然后您可以将 HTML 内容加载到 String 中，并在将 HTML 加载到 WKWebView 之前用您的值替换占位符：

if let filepath = Bundle.main.path(forResource: "content", ofType: "html") {
    do {
        let rawHtmlString = try String(contentsOfFile: filepath)
        let htmlString = rawHtmlString.replacingOccurrences(of: "@@index@@", with: "17.")
        webView.loadHTMLString(htmlString, baseURL: nil)
    } catch {
        // contents could not be loaded
    }
}

如果您不能插入占位符并且必须按原样使用 HTML 文件，您可以像这样插入您的值：

if let filepath = Bundle.main.path(forResource: "content", ofType: "html") {
    do {
        let rawHtmlString = try String(contentsOfFile: filepath)

        // get the ranges of the h3 tags
        if let h3OpeningTagRange = rawHtmlString.range(of: "<h3>"), let h3ClosingTagRange = rawHtmlString.range(of: "</h3>") {

            // get the text inbetween the h3 tags
            let h3Content = rawHtmlString[h3OpeningTagRange.upperBound..<h3ClosingTagRange.lowerBound]

            // build the new html string
            let htmlString =
                // everything until and including the <h3> tag
                rawHtmlString[...h3OpeningTagRange.upperBound]
                // the value you want to insert
                + "17. "
                // the text inbetween the h3 tags
                + h3Content
                // the rest of the hmtl including the </h3> tag
                + rawHtmlString[h3ClosingTagRange.lowerBound...]

            webView.loadHTMLString(String(htmlString), baseURL: nil)
        }
    } catch {
        // contents could not be loaded
    }
}

这会获取开始 <h3> 标签的范围和结束 </h3> 标签的范围，并使用这些范围构造 HTML 字符串。

这不是一个非常可靠的方法，但对于您的特殊情况来说可能是一个简单的解决方案。

Answer 2

尝试将以下 javascript 附加到您的 HTML

"""
<script>
    window.addEventListener('load', function () {    
        var h3Node = document.getElementsByTagName('h3')[0];
        h3Node.innerHTML = "\(Your_desired_string_to_show)" + h3Node.innerHTML
    });

</script>
"""

示例输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <h3>
            如何查询我购买的订单？
        </h3>
        <p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
        </p>
    </div>
</body>
</html>

<script>
    window.addEventListener("load", function () {    
        var h3Node = document.getElementsByTagName("h3")[0];
        h3Node.innerHTML = "17." + h3Node.innerHTML
    });

</script>

奖金

如果你有多个这样的 <h3> 标签，并且你想根据它们的相应位置动态添加节号，请看下面的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <h3>
            如何查询我购买的订单？
        </h3>
        <p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
        </p>
    </div>
    <div>
        <h3>
            如何查询我购买的订单？
        </h3>
        <p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
        </p>
    </div>
    <div>
        <h3>
            如何查询我购买的订单？
        </h3>
        <p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
        </p>
    </div>
    <div>
        <h3>
            如何查询我购买的订单？
        </h3>
        <p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
        </p>
    </div>
    <div>
        <h3>
            如何查询我购买的订单？
        </h3>
        <p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
        </p>
    </div>
    <div>
        <h3>
            如何查询我购买的订单？
        </h3>
        <p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
        </p>
    </div>
    <div>
        <h3>
            如何查询我购买的订单？
        </h3>
        <p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
        </p>
    </div>
    <div>
        <h3>
            如何查询我购买的订单？
        </h3>
        <p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
        </p>
    </div>
</body>
</html>

<script>
    window.addEventListener("load", function () {    
        var h3Nodes = document.getElementsByTagName("h3");
        for (var index = 0; index < h3Nodes.length; index++) {
            var h3Node = h3Nodes[index];
            h3Node.innerHTML = (index+1) + "." + h3Node.innerHTML;
        }
    });

</script>

WKWebView：如何在加载本地 html 时将文本插入 HTML

WKWebView: How to insert text to HTML when loading local html

html

ios

wkwebview

示例输出

奖金