Таблица стилей, примененная к Javascript через WKWebView, работает на симуляторе, не работает на устройстве - PullRequest
Новая
       9

Таблица стилей, примененная к Javascript через WKWebView, работает на симуляторе, не работает на устройстве

0 голосов
/ 29 августа 2018

При следующей настройке я могу запустить свое приложение на симуляторе, и таблица стилей будет правильно применена к содержимому. Однако выполнение точно такого же кода на устройстве приводит к игнорированию таблицы стилей.

Как мне настроить WKWebView: 

let contentController = WKUserContentController()
let userScript =  WKUserScript(source: "my script goes here",
                                injectionTime: .atDocumentStart,
                                forMainFrameOnly: false)
contentController.addUserScript(userScript)
let configuration = WKWebViewConfiguration()
configuration.userContentController = contentController
webView = WKWebView(frame: .zero, configuration: configuration)
// Finish setting up & running web view here

В приведенном выше разделе изменение injectionTime на .atDocumentEnd и forMainFrameOnly на true не имеет никакого эффекта.

И упрощенный файл index.html, который довольно пуст: 

<html>
    <head>
        <title>Style This Page</title>
    </head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <body onload="runScript()">
        <div id="scriptAttachesHere"></div>
        <script>
        let script
        window.onload = function() {
            let options = { }
            script = new window.SCRIPT.Name(document.getElementById('scriptAttachesHere'), options);
        }
        </script>
    </body>
</html>

И фрагмент кода из таблицы стилей: 

.script-container .devices .contentContainer::before { height: unset !important; }

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

1 Ответ

0 голосов
/ 29 августа 2018

Так что это оказалось довольно просто.

Apple хмурится при загрузке локальных файлов в WKWebView, поэтому я решил эту проблему, объединив мою таблицу стилей непосредственно с моим HTML-кодом, вместо независимой таблицы стилей. 

<html>
    <head>
        <title>Style This Page</title>
    </head>
    <style>
       .script-container .devices .contentContainer::before { height: unset !important; }
    </style>
    <body onload="runScript()">
        <div id="scriptAttachesHere"></div>
        <script>
        let script
        window.onload = function() {
            let options = { }
            script = new window.SCRIPT.Name(document.getElementById('scriptAttachesHere'), options);
        }
        </script>
    </body>
</html>

Обратите внимание на удаление кода для ссылки на локальную таблицу стилей.

...