SWIFT - Loading local CSS file

Question

I am trying to add some local css to my webview but it seems that I have a problem with the css file in my app :

Nothing happens when I try to load the css from the local css file but when I replace '%@' by a online css file it works fine.

Thank you for your help.

import UIKit

class ViewController: UIViewController, UIWebViewDelegate {

    @IBOutlet weak var webview: UIWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        webview.delegate = self

        let html: String! = "<html><head></head><body><div id=\"postcontent\"><h1>Hello</h1></div></body></html>"

        webview.loadHTMLString(html, baseURL: nil)
    }

    func webViewDidFinishLoad(_ webView: UIWebView){
        let path = Bundle.main.path(forResource: "styles", ofType: "css")

        let javaScriptStr: NSString = "var link = document.createElement('link'); link.href = '%@'; link.rel = 'stylesheet'; document.head.appendChild(link)"
        let javaScripthPath = NSString(format: javaScriptStr, path!)
        webview.stringByEvaluatingJavaScript(from: javaScripthPath as String)
        print(javaScripthPath)
    }
}

Look at this and see if it helps. Swift - Apply local css to be view — MwcsMac
– MwcsMac, Commented Jun 10, 2017 at 18:55
I have already checked that post that is why our code is pretty similar but it seems it didn't work for me — Florian Ldt
– Florian Ldt, Commented Jun 10, 2017 at 19:01

paulvs · Accepted Answer · 2017-06-10 20:24:48Z

2

Your HTML file is loaded from a string, so it's loaded into a web view that can't access files on the file system (probably due to the Same Origin Policy that browsers implement). It can only access resources similarly injected in via loadHTMLString.

If you want to use local CSS, load your HTML from a file instead of a string. This will give the web view access to the CSS if it's in the same directory.

Here is a demo, first, the HTML is now a file.

Then, your code can look like this:

class ViewController: UIViewController, UIWebViewDelegate {

    @IBOutlet weak var webview: UIWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        webview.delegate = self

        let path = Bundle.main.path(forResource: "app", ofType: "html")!
        let url = URL(fileURLWithPath: path)
        let request = URLRequest(url: url)

        webview.loadRequest(request)
    }

    func webViewDidFinishLoad(_ webView: UIWebView){
        let path = Bundle.main.path(forResource: "styles", ofType: "css")!

        let javaScriptStr = "var link = document.createElement('link'); link.href = '\(path)'; link.rel = 'stylesheet'; document.head.appendChild(link)"
        webview.stringByEvaluatingJavaScript(from: javaScriptStr)
    }
}

answered Jun 10, 2017 at 20:24

paulvs

12.1k3 gold badges44 silver badges66 bronze badges

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

2 Comments

Florian Ldt Over a year ago

ty for your answer. It works well with the html file. But the html part will be dynamic and get by database call so any other way to do it without creating a file each time ?

paulvs Over a year ago

The alternative would be to also inject your CSS in as a string, that will probably work because they'll be in the same "domain".

Collectives™ on Stack Overflow

SWIFT - Loading local CSS file

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related