样本输出

Question

使用WKWebView加载本地HTML文件（不是在线资源）时，我需要传递一些变量。标题索引正好由下一页的tableView索引路径确定，如下图。 / p>

我似乎有一个CSS问题：Insert CSS into loaded HTML in UIWebView / WKWebView

还有其他方法可以处理吗？

类似于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

$(document).on('scroll', function() {
  scrtop = $(window).scrollTop();
  offtop = $('.left-div').offset().top;
  if (scrtop > offtop) {
    $('.left-div div').addClass('fixed');
  } else {
    $('.left-div div').removeClass('fixed');
  }
});

样本输出

"""
<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>

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

2 个答案:

样本输出

奖金