SWIFT 5中带有动态URL的WKWebView深浅模式 [英] WKWebView Dark and Light Mode with dynamic URL in Swift 5

问题描述

我创建的WKWebView没有一个URL。用户将此WKWebView用作Safari意味着用户可以在WKWebView上搜索任何内容。我面临着一个问题，当我改变暗模式和亮模式时，我的Web视图将只显示白色(光)模式。我的应用程序在这两种模式下都能正常工作，除了WKWebView之外，其他一切都很好。

已在上搜索，因此找不到任何与此相关的问题。 how to use iOS 13 darkmode for wkwebview

我引用此博客，但它是静态URL，因此对我没有帮助

https://useyourloaf.com/blog/using-dynamic-type-with-web-views/

还检查了不透明和背景属性，但不适用于我！

重要信息 用户可以搜索任何内容，如google.com、照片或任何冲浪等。

class DownloadViewController: UIViewController {
    
    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        webView.uiDelegate = self
        webView.navigationDelegate = self
        webView.load(URLRequest(url: URL(string: "https://www.google.com")!))
        webView.allowsBackForwardNavigationGestures = true
        webView.allowsLinkPreview = true
    }

}

首先我正在加载Google站点，然后取决于用户(完全动态的，而不是这里的一个URL)。

请推荐我！谢谢。

推荐答案

您可以使用注入css技术为您加载的网页添加亮/暗功能，例如：

// Load a web page
webView?.load(URLRequest(url: URL(string: "https://google.com")!))

// Inject Light/Dark CSS

let lightDarkCSS = ":root { color-scheme: light dark; }"
let base64 = lightDarkCSS.data(using: .utf8)!.base64EncodedString()

let script = """
    javascript:(function() {
        var parent = document.getElementsByTagName('head').item(0);
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = window.atob('(base64)');
        parent.appendChild(style);
    })()
"""

let cssScript = WKUserScript(source: script, injectionTime: .atDocumentEnd, forMainFrameOnly: false)
webView?.configuration.userContentController.addUserScript(cssScript)

结果：

要支持页面更改，您可以将插入代码移动到didCommitNavigation通知：

func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
    ...
    // Inject CSS here
}

注意：它一般不适用于任何网页，因为某些网站可以硬编码背景、字体等颜色，但您也可以通过覆盖其css来调整特定页面。

这篇关于SWIFT 5中带有动态URL的WKWebView深浅模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！