Android Question B4A: Webview loadhtml (not file) ++ css (local file)

nemethv · May 22, 2020

Hi,

I have an API call that returns html code (referred in the code as to FullResponseText) that contains css references but the css file itself isn't returned. e.g:

HTML:

</p><h2><span class="mw-headline" id="Get_in">Get in</span></span></h2><h3><span class="mw-headline" id="By_car">By car</span></span></h3>

I made a copy of the css file and saved it in the Files folder. The aim is for the webview to use the css file.

This doesn't work [it doesn't break, but the CSS doesn't seem to load]:

B4X:

Dim FullResponsePre As String : FullResponsePre = "<!DOCTYPE html><html><head><link rel=" & QUOTE & " stylesheet " & QUOTE & " href=" & QUOTE & "wikipedia.css" & QUOTE & "></head><body>"
Dim FullResponsePost As String : FullResponsePost = "</body></html>"
HTMLContentView.LoadHtml(FullResponsePre & FullResponseText & FullResponsePost)

This equivalently doesn't work: [using the webviewassetfile sub floating around here on the forum] -- again it doesn't break, just doesn't do anything.

B4X:

HTMLContentView.LoadHtml($"<!DOCTYPE html><html><head><link rel="stylesheet" href="${WebViewAssetFile("wikipedia.css")}"/> </head><body>"$ & FullResponseText)

Suggestions please? (also be specific if possible, telling me to insert java isn't something I really understand, so just to save time for everyone, be specific pls.)
Thnx

JohnC · May 22, 2020

The problem is probably related to webview not being able to load/see the local CSS file.

Is there a reason why you can't host the CSS file on your website and have the returned HTML code reference the CSS file on your website?

nemethv · May 22, 2020

JohnC said:
The problem is probably related to webview not being able to load/see the local CSS file.

Is there a reason why you can't host the CSS file on your website and have the returned HTML code reference the CSS file on your website?

I'm querying an API that returns the HTML as-is, so I'm afraid it's not an option.

JohnC · May 22, 2020

Since the API is returning the HTML code and you get it as a string, why not just insert a line into the <HEAD> of the retuned HTML code that contains the link to a CSS file on your website (ie "<link rel="stylesheet" href="www.mywebs ite.com/custom_styles.css"/>") ?

Then when you load the HTML code into webview it should be able to use the external CSS file to resolve the CSS references.

NOTE: Keep in mind, that if the HTML code contains any javascript, then that would be a totally different issue that would also need to be resolved after getting the CSS issue fixed

nemethv · May 22, 2020

JohnC said:
Since the API is returning the HTML code and you get it as a string.

Why not just add a line to the <HEAD> of the retuned HTML code that contains the link to a CSS file on your website (ie "<link rel="stylesheet" href="www.mywebs ite/custom_styles.css"/>") ?

Then when you load the HTML code into webview it should be able to use the external CSS file to resolve the CSS references.

Keep in mind, that if the HTML code contains any javascript, that would be a totally different issue that would need to be resolved.

I don't have a website I can store the CSS in/at. The API is a public API so the CSS needs to be stored locally.
The one thing I managed to do is read the CSS as a string value and then force it to load beforehand as:

B4X:

Dim FullResponsePre As String : FullResponsePre = "<head><style type=" & QUOTE & "text/css" & QUOTE & ">" & CRLF & CSSText & CRLF & "</style></head><body><html>"
Dim FullResponsePost As String : FullResponsePost = "</body></html>"
    
'Log(FullResponsePre & FullResponseText & FullResponsePost)           
HTMLContentView.LoadHtml(FullResponsePre & FullResponseText & FullResponsePost)

...which does the job, but reading directly from the file would be preferred.

JohnC · May 22, 2020

Unless someone else knows of a way to dynamically load in a local CSS file into webview, then your CSS file pre-load method might be the only way.

Android Question B4A: Webview loadhtml (not file) ++ css (local file)

nemethv

Member

JohnC

Expert

nemethv

Member

JohnC

Expert

nemethv

Member

JohnC

Expert

Similar Threads