UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SwiftUI WKWebview.loadHTMLString Not displaying content

Forums > SwiftUI

Hello all,

I've been trying to get an HTML string i receive back from a JSON api display in a view. Ive ben trying with just a sample simple string for tessting. It appears to load through the code without an error, but i never see the string render. Can i get a second opinion? THANKS!

I've got this helper view coded to handle the WKWebview

import SwiftUI
import WebKit

struct HTMLView: UIViewRepresentable {
    var htmlString: String

    func makeUIView(context: Context) -> WKWebView {       
        return WKWebView()
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.loadHTMLString(htmlString, baseURL: nil)
    }

}

and then in my main body:

import SwiftUI

struct DetailTab: View {

    let HTMLstring = "<h1> This is a HTML string </h1>"

    var body: some View {
        VStack(alignment: .leading) {

            HTMLView(htmlString: HTMLstring)
            Spacer()
        }

    }
}

3      

Your code works fine for me in XCode 12.2

loadHTMLString in simulator

3      

Thanks for the reply. My code examples are only snippets from my main project. After reading through your reply, i moved my call to the HTMLView contorller around until it did work correctly. The problem seems to be related to making that call from with in a LazyVStack. I want to display that text in a row within a Scrollview. Here is a simple mockup that is not working.

import SwiftUI
import UIKit
import WebKit

struct ContentView: View {
    let HTMLstring = "<h1> <Font color#000000>This is a HTML string</font> </h1>"

    var body: some View {
        NavigationView {
            ScrollView(.vertical) {
                LazyVStack(spacing: 5) {
                    ForEach(0..<5) { i in
                        NavigationLink(destination: Test()) {
                            VStack {
                                Text("test")

                                // DOES NOT WORK HERE
                                HTMLView(htmlString: HTMLstring)
                                Text("test")
                            }
                        }
                        Divider()
                    }
                }
            }
        }
    }
}

struct Test: View {
    let HTMLstring = "<h1> <Font color#000000>This is a HTML string</font> </h1>"
    var body: some View {
        VStack {
            Text("test destination")

            // WORKS HERE
            HTMLView(htmlString: HTMLstring)
        }

    }
}

struct HTMLView: UIViewRepresentable {
    var htmlString: String

    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView(frame: .zero)

        webView.loadHTMLString(htmlString, baseURL: nil)

        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.loadHTMLString(htmlString, baseURL: nil)
    }

}

3      

Okay, well a number of things to comment on here:

  1. <h1> <Font color#000000>This is a HTML string</font> </h1> is not valid HTML. The color attribute needs to be quoted like so: color=\"#000000\". (For that matter, the font tag hasn't been supported since HTML4. You should really change it to something like <h1 style=\"color: #000000\">This is a HTML string</h1>)

  2. #000000 is black, so how can you tell if the font color is working or not when the default is black anyway?

  3. For your HTMLView to show, you need to give it a frame, e.g.: .frame(minHeight: 100, maxHeight: .infinity) It works in the second example but in the first example it's in a ScrollView so you need to let SwiftUI know how much vertical space to allocate for it.

3      

Thanks @roosterboy, it was the frame! Sorry about the FONT tag in the string. I had added that bit while trying to get it to display thinking it was displaying white text on my white background. Then I kept playing with it, and it was just a reminant i had missed in the code i posted.

Thanks again!

3      

Hacking with Swift is sponsored by Essential Developer

SPONSORED Join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer! Hurry up because it'll be available only until April 28th.

Click to save your free spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.