WKWebView: Как вставить текст в HTML при загрузке локального HTML - PullRequest
Новая
       8

WKWebView: Как вставить текст в HTML при загрузке локального HTML

0 голосов
/ 22 октября 2018

При использовании WKWebView для загрузки локальных HTML-файлов (не онлайновых ресурсов) мне нужно передать некоторую переменную. Точный индекс заголовка, который определяется указателем пути tableView последней страницы, как показано на следующем рисунке.

img

Мне кажется, что вопрос CSS: Вставьте CSS в загруженный HTML в UIWebView / WKWebView

Есть лиКак еще можно обработать?

Как синтаксис шаблона Java или синтаксис Jinja2 в Python.

Вот 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> для вставки

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

Попробуйте добавить следующий 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>
0 голосов
/ 23 октября 2018

Если у вас есть полный контроль над файлами 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, используя эти диапазоны.

Это не очень надежный способ сделатьэто, но это может быть простым решением для вашего особого случая.

...