Swift 5 中具有动态 URL 的 WKWebView 明暗模式

Question

我创建的 WKWebView 没有 url。用户使用此 WKWebView 作为 Safari 意味着用户可以在 WKWebView 上搜索任何内容。当我更改深色和浅色模式时，我遇到了一个问题，我的 Web 视图将仅显示白色（浅色）模式。我的应用程序在两种模式下都可以正常工作，除了 WKWebView。

已经在 SO 上搜索没有找到任何相关问题。

我引用了这个博客，但它是静态的 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）。

请推荐我！谢谢。

Answer 1

您可以使用注入 CSS 技术将 Light/Dark 功能添加到您加载的网页中，例如：

// 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
}

NOTE: It doesn't work with any web page in general because some of web sites can hardcode colors of background, fonts etc. but you can tune specific pages as well by overriding its CSS.

Answer 2

Already search on SO not find any related question on this.

有趣的是你提到了这一点，因为这个问题已经被讨论过很多次了。快速搜索会显示许多好的答案和话题，例如：.

话虽如此，快速回答是：

WKWebView 可以像其他任何 UIView/NSView 一样采用明暗模式。你可以在外观上手动设置interfaceStyle，否则它会继承它。此处有更多详细信息 overrideUserInterfaceStyle。

但是

可能您面临的问题是，即使 WKWebView 使用 dark interfaceStyle，网站仍然以亮模式显示。那是因为这些网站（google 和任何其他 website/URL）是独立的，并自行处理自己的风格。其中一些会进行调整以匹配您设备的界面风格，但不是全部。简而言之，即使WKWebView处于深色模式，Google也会加载白色背景。

正如其他人所提到的，您可以通过手动注入 CSS 来更改此行为，如果您想要这样做，请检查这些答案，同时检查我在开头发布的 link他们讨论该方法的答案。

Answer 3

与 android 网络视图 (force_darkmode) 一样，Apple 尚未提供对暗模式网络视图的支持。您可以通过一些知名网站探索 Safari，即使它们不会转换为暗模式。所以我们应该等待 Webkit 暗模式支持 到那时。这些 CSS 注入不是最佳实践或稳健的解决方案。

Swift 5 中具有动态 URL 的 WKWebView 明暗模式

WKWebView Dark and Light Mode with dynamic URL in Swift 5

swift

wkwebview

swift5

ios-darkmode

darkmode

但是