html - 如何在 WKWebView 中使用 CSS？

问题描述

我想使用 WKWebView 来呈现文档。我制作Invoice.html并将Invoice.css它们打包。当我将 Invoice.html 加载到 Safari（通过拖动文件）时，一切看起来都很好。但不在 WKWebView 中。我试过了：

简单的方法：

let htmlUrl = URL(fileReferenceLiteralResourceName: "Invoice.html")
let html = String.init(contentsOf: htmlUrl)
webView.loadHTMLString(html, baseURL: nil)

Invoice.html 的开头如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Invoice</title>
        <link REL=StyleSheet HREF="./Invoice.css" TYPE="text/css" MEDIA=screen>
            </head>
    <body id="Invoice" xml:lang="en-US">
        <div class="page">
            <div>
                <p>FAKTURA VAT</p>
            </div>
            <div>
                <div>
                    <p>SPRZEDAWCA SELLER: </p>
                </div>
                <p></p>

我可以看到文本WKWebView但没有样式。

WKWebView 扩展

extension WKWebView {
    func injectCSSFrom(url: URL) {


        let css = try! String(contentsOf: url).split(separator: "\n")
        //let css = "body { background-color : #aabbcc };"
        print (css)
        let js = "var style = document.createElement('style'); style.innerHTML = '\(css)'; document.head.appendChild(style);"

        evaluateJavaScript(js) {(result, error) in
            if let error = error {
                print("DOES NOT WORK", error)
            }
        }
    }
}

印刷：

body {
    margin: 0;
    padding: 0;
    background-color: #FA0000;
    font: 7pt "Helvetica";
}

.page {
    width: 21cm;
    height: 29.7cm;
    padding: 1.5cm;
    border: 1px #D3D3D3 solid;
    border-radius: 0px;
    background: white;
}

就像通过简单的方式一样。没有，没有风格，没有背景颜色。但如果我改变let css = "body { background-color : #aabbcc };"至少背景颜色的变化。

在这两种情况下都会evaluate...引发错误Error Domain=WKErrorDomain Code=4 "A JavaScript exception occurred" UserInfo={WKJavaScriptExceptionLineNumber=1, WKJavaScriptExceptionMessage=SyntaxError: Unexpected EOF, WKJavaScriptExceptionColumnNumber=0, WKJavaScriptExceptionSourceURL=about:blank, NSLocalizedDescription=A JavaScript exception occurred}

是一种简单而通用的附加css到html本地生成的方法吗？

标签： htmlcssswiftmacoswebkit

html - 如何在 WKWebView 中使用 CSS？

问题描述

解决方案

推荐阅读