如何更改 WKWebView 文本颜色？

Posted 2023-02-23

【中文标题】如何更改 WKWebView 文本颜色？

【英文标题】：How to change WKWebView text color?

【发布时间】：2020-09-22 21:00:47

【问题描述】：

我有一个带有WKWebView 的ViewController，我在.html 和.css 文件中加载了webView 的文本。它看起来像在 Apple Books 应用中阅读书籍的控制器。

do 
            guard let filePath = Bundle.main.path(forResource: "index", ofType: "html") 
                else 
                    print ("File reading error")
                    return
            
            
            let headerString = "<meta name=\"viewport\" content=\"initial-scale=1.1\" />"
            let content =  try String(contentsOfFile: filePath, encoding: .utf8)
            let baseUrl = URL(fileURLWithPath: filePath)
            
            webView.loadHTMLString(headerString+content, baseURL: baseUrl)

        
        catch 
            print ("File HTML error")
        

我还有 4 个主题可以更改我的 ViewController 的外观（白色、黑色、海军蓝和黄色，就像在 Apple Books 中一样）。我想在更改主题时更改webView 中的文本颜色。怎么做？如何更改webView的颜色？

【参考方案1】：

在您的 .html 文件中，您需要编写 javascript 函数（例如：changeColor）来更改 HTML 元素的颜色。当您在 ViewController 中更改主题时，您需要使用 JavaScript 函数名称执行 callAsyncJavaScript 函数。

let web = WKWebView()
web.callAsyncJavaScript("javaScriptFumction", in: WKContentWorld)

WKWebView 有 callAsyncJavaScript 函数的异步实现。

【讨论】：

我有一些错误 - ibb.co/ctVWfH8。但它是 ios 14 的解决方案……支持 iOS 12,13 怎么样？

UIWebView 也有类似的功能。你可以考虑换成这个 UI Element。

好的...但是我想使用 WKWebView 和我的 iOS 部署目标 12