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      

BUILD THE ULTIMATE PORTFOLIO APP Most Swift tutorials help you solve one specific problem, but in my Ultimate Portfolio App series I show you how to get all the best practices into a single app: architecture, testing, performance, accessibility, localization, project organization, and so much more, all while building a SwiftUI app that works on iOS, macOS and watchOS.

Get it on Hacking with Swift+

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.