Как внедрить несколько пользовательских скриптов в WKWebView для получения эффекта темного режима?

Question

Я успешно получил эффект темного режима для случайного HTML на html-странице веб-сайта, используя источник из этого замечательного учебника .

Я загрузил эти фотографии, чтобы лучше объяснить, что я получил.

Я пытаюсь получить то же самое в WKWebView.HTML загружается из API, поэтому я использую метод WKWebView.loadHTMLString.Для этого примера демонстрационный HTML сохраняется в файле в проекте Xcode.Также я добавил 2 файла javascript в Xcode: darkmode.min.js (это библиотека) и darkmode-options.js (позиция и текстовая метка для переключателя внизу страницы).Я думаю, что я не правильно вводить 2 сценария, используя WKUserScript.Очевидно, что darkmode.min.js должен быть загружен до darkmode-options.js.Вот почему я использовал WKUserScriptInjectionTime.atDocumentStart и WKUserScriptInjectionTime.atDocumentEnd.

Также, когда я печатаю в консоли источник представления HTML, он не показывает скрипты, которые были вставлены.

 private func initWebView() {

    let html = self.demoHTML
    let jsLibrary = self.darkModeLibraryJS
    let jsOptions = self.darkModeOptionsJS

    let webConfiguration = WKWebViewConfiguration()
    let contentController = WKUserContentController()

    // Libray script an document start
    let userScript = WKUserScript(source: jsLibrary, injectionTime: WKUserScriptInjectionTime.atDocumentStart, forMainFrameOnly: false)
    contentController.addUserScript(userScript)

    // Options script and document end
    let optionsScript = WKUserScript(source: jsOptions, injectionTime: WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: false)
    contentController.addUserScript(optionsScript)

    webConfiguration.userContentController = contentController


    self.webview = WKWebView(frame: CGRect.zero, configuration: webConfiguration)
    self.webview?.navigationDelegate = self
    self.view.addSubview(webview!)

    self.webview!.loadHTMLString(html, baseURL: nil)
    self.webview!.fillSuperview() // after view has been added as subview
}

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    self.chechHTML()
}

private func chechHTML() {

    let script = "document.documentElement.outerHTML.toString()"

    self.webview?.evaluateJavaScript(script, completionHandler: { (html, error) in

        if html != nil {
            print("❌: check html response", html ?? "")
        }
        if error != nil {
            print("❌: check html with error", error ?? "")
        }
    })
}

Проект загружен на github: https://github.com/CristiGhn/darkmode-webview. Проект Xcode также содержит файл darkmode.html, который работает и показывает то же, что и на фотографиях выше.

Спасибо!

Answer 1

Используя это учебное пособие Я реализовал эффект с помощью mix-blend-mode: разница.

Внедрение нескольких файлов WKUserScript в веб-просмотр в начале и конце документа:

1. Файл JavaScript с функцией переключения в начале документа
2. Внедрить контейнер div с фоном и блендером, который будет влиять на смешение (в конце документа)

3. Внутренние теги стиля содержимого CSSфайл в конце документа

   let webConfiguration = WKWebViewConfiguration()
   let contentController = WKUserContentController()
   
   // Libray script an document start
   let darkModeScript = WKUserScript(source: self.darkModeLibraryJS, injectionTime: WKUserScriptInjectionTime.atDocumentStart, forMainFrameOnly: false)
   contentController.addUserScript(darkModeScript)
   
   let injectDarkModeScript = WKUserScript(source: self.injectDarkModeJS, injectionTime: WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: false)
   contentController.addUserScript(injectDarkModeScript)
   
   let injectCSScript = WKUserScript(source: self.injectCSS, injectionTime: WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: false)
   contentController.addUserScript(injectCSScript)
   
   webConfiguration.userContentController = contentController
   
   self.webview = WKWebView(frame: CGRect.zero, configuration: webConfiguration)
   self.webview?.navigationDelegate = self
   self.view.addSubview(webview!)
   
   self.webview!.loadHTMLString(html, baseURL: nil)
   

JavaScript с функцией переключения и внедрение CSS (darkmode.js)

function injectCSS(css) {
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');
    head.appendChild(style);

    style.type = 'text/css';
    if (style.styleSheet){
         // This is required for IE8 and below.
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }
 }

 function showDarkMode() {
     var blender = document.getElementById('blender')
     if (blender.hasAttribute("hidden")) {
         blender.removeAttribute("hidden")
     }
  }

 function showOriginalMode() {
     var blender = document.getElementById('blender')

     if (!blender.hasAttribute("hidden")) {
         blender.setAttribute("hidden", true)
     }
 }

JavaScript с добавлением контейнера div в DOM веб-просмотра(inject-darkmode.js)

var container = document.createElement('div')
container.id = 'darkmode-container'
document.body.appendChild(container)

var background = document.createElement('div')
background.classList.add('darkmode-background')
container.appendChild(background)

var blender = document.createElement('div')
blender.id = 'blender'
blender.setAttribute('hidden', true)
container.appendChild(blender)

CSS для определения блендера и фона (darkmode.css)

#blender {
    width: 100vw;
    height: 100vh;
    left: 0pt;
    top: 0pt;
    position: fixed;
    background: white;
    transition: all 1s ease;
    mix-blend-mode: difference;
 }

 img {
     isolation: isolate;
 }

 .darkmode-background {
     position: fixed;
     background: white;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: -1;
 }

Репозиторий с рабочим проектом: https://github.com/CristiGhn/darkmode-webview