How to apply Local CSS into HTML content in wkWebView Swift

Question

I have tried all the solution available on Stack-Overflow Couldn't helped out by any solution

extension ViewController: WKNavigationDelegate,WKUIDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        self.insertContentsOfCSSFile2(into: webView)
        self.insertContentsOfCSSFile1(into: webView)
    }

    func insertContentsOfCSSFile2(into webView: WKWebView) {
        guard let path = Bundle.main.path(forResource: "article-style", ofType: "css") else { return }
        let cssString = try! String(contentsOfFile: path).trimmingCharacters(in: .whitespacesAndNewlines)
        let jsString = "var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style);"
        print(jsString)
        webView.evaluateJavaScript(jsString) {(result, error) in
            if let error = error {
                print(error)
            }
        }
    }

    func insertContentsOfCSSFile1(into webView: WKWebView) {
        guard let path = Bundle.main.path(forResource: "custom", ofType: "css") else { return }
        let cssString = try! String(contentsOfFile: path).trimmingCharacters(in: .whitespacesAndNewlines)
        let jsString = "var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style);"
        print(jsString)
        webView.evaluateJavaScript(jsString) { (result, error) in
            if let error = error {
                print(error)
            }
            if let result = result {
                print(result)
            }
        }
    }
}

Here is the web View initialisation

func loadUrl() {

    webView = WKWebView(frame: .zero, configuration: WKWebViewConfiguration())
    webView.navigationDelegate = self
    webView.allowsLinkPreview = true
    webView.uiDelegate = self
    webViewContainer.addSubview(webView)
    self.addConstraints(to: webView, with: webViewContainer)

    do {
        guard let filePath = Bundle.main.path(forResource: "article", ofType: "html")
            else {
                print ("FILE READING ERROR")
                return
        }
        let contents =  try String(contentsOfFile: filePath, encoding: .utf8)
        let baseUrl = URL(fileURLWithPath: filePath)
        print(baseUrl)
        print(contents)
        webView.loadHTMLString(htmlString, baseURL:URL(fileURLWithPath: Bundle.main.bundlePath))
    }
    catch {
        print ("FILE HTML ERROR")
    }
}

"article.html " , "article-style.css" and "custom.css" are the three local file in my project directory

I am calling the webView load request from viewDidLoad() method

There is nothing that I haven't tried but couldn't solved my problem

Any help is greatly appriciated

Stickley · Accepted Answer · 2020-08-03 21:14:43Z

1

You must add an HTML markup file to your project. And in the code to refer to this file when rickste. Something like this

let filePath = Bundle.main.path(forResource: resource, ofType: "html", inDirectory: "www")
var htmlString = try? String(contentsOfFile: filePath ?? "", encoding: .utf8)
htmlString = htmlString?.replacingOccurrences(of: "TABLEVALUE", with: html)loadHTMLString(html, baseURL: nil)

Edit the file like this, based on your requirements.

<head>

<style type="text/css">
    table{
        width: 100%;
        overflow-x: scroll;
    }

td{
    font-size: 14px;
    font-family:"LucidaSansOT";
    padding: 15px;
    border: white 0.5px solid
}

tr{
    background: #fbdfb2; 
}

tr:first-child{
    background: #f29400;
}
window.onload = function() {
    window.location.href = "ready://" + document.body.offsetHeight;
}
</style>
</head>
<body>
    <div>TABLEVALUE</div>
</body>

Example https://prntscr.com/ltwbg7

edited Aug 3, 2020 at 21:14

Stickley

4,7373 gold badges33 silver badges30 bronze badges

answered Dec 12, 2018 at 8:43

Sasha Tsvigun

3515 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

VIJAY SINGH RAGHAV Over a year ago

It is necessary to keep the file in directory or we can directly keep it in Project Folder

Sasha Tsvigun Over a year ago

This is the code by which you can refer to the html file with the CSS markup you need.

VIJAY SINGH RAGHAV Over a year ago

Did't work I have done the exact same thing but still didn't work

Collectives™ on Stack Overflow

How to apply Local CSS into HTML content in wkWebView Swift

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related