Load local resources along with HTML string in WKwebView (SWIFT)?

Question

I have an html string(which i got from an api response). Also i have some js file, css file, images and fonts on the app bundle.

I need to load these files along with the html string in WKWebView

the html string look like this

the app bundle look like this

My question similar to this :

Thanks in advance

Bertram Gilfoyle · Accepted Answer · 2020-08-17 10:19:34Z

2

Click on "use folder reference" option instead of "create groups" while adding the resources files and folders into bundle.

answered Aug 17, 2020 at 10:19

Bertram Gilfoyle

10.3k7 gold badges45 silver badges70 bronze badges

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

Comments

Prakash · Accepted Answer · 2020-08-13 10:40:59Z

0

Create a html below like this

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <meta name="supported-color-schemes" content="light dark">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <body>
        <div id="container">
            <div id="editor" contentEditable="true" placeholder="" class="placeholder"></div>
        </div>
        <script type="text/javascript" src="rich_editor.js"></script>
    </body>
</html>

Load your html and css file in the html, I have used rich_editor.js and style.css

Load created html to webview like this

webView.loadFileURL(documentsUrl, allowingReadAccessTo: documentsUrl.deletingLastPathComponent())

Using below function insert your Html string that obtained from API

public func runJS(_ js: String, handler: ((String) -> Void)? = nil) {
        webView.evaluateJavaScript(js) {(result, error) in
            if let error = error {
                print("WKWebViewJavascriptBridge Error: \(String(describing: error)) - JS: \(js)")
                handler?("")
                return
            }
            
            guard let handler = handler else { return }
            if let resultBool = result as? Bool {
                handler(resultBool ? "true" : "false")
                return
            }
            if let resultInt = result as? Int {
                handler("\(resultInt)")
                return
            }
            if let resultStr = result as? String {
                handler(resultStr)
                return
            }
            handler("") // no result
        }
    }

To call this function

runJS("RE.insertHTML('yourHtmlString')")

answered Aug 13, 2020 at 10:40

Prakash

8726 silver badges16 bronze badges

7 Comments

Vishnu Hari Over a year ago

I have multiple css files, how can I load multiple css files

Prakash Over a year ago

Is it static or dynamic css files?

Vishnu Hari Over a year ago

those are static, please check the images in the question. I'm upated the question

Prakash Over a year ago

Load all the css files that we imported already for style.css

Vishnu Hari Over a year ago

I found the solution. No code is required. while adding the resources files and folders into bundle Click on "use folder reference" option instead of "create groups"

|

Collectives™ on Stack Overflow

Load local resources along with HTML string in WKwebView (SWIFT)?

2 Answers 2

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related