Android WebView shows plain text instead of html

Question

First, I am going to say this is only an issue on Android 2 and older (4 seems to be unaffected and I didn't test 3).

I have a WebView that loads html from a string. The HTML looks like this:

<html>  
    <head>
        <link rel='stylesheet' type='text/css' href='http://www.robotsidekick.com/test.css?rev=0' />
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

You can see that css file looks like this:

body {
    font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
}
h1 {
    border-bottom: 3px solid #ccc;
}

The WebView code looks like this:

final WebView webview = new WebView(this);
setContentView(webview);
final String result = "<html><head><link rel='stylesheet' type='text/css' href='http://www.robotsidekick.com/test.css?rev=0' /></head><body><h1>Hello World</h1></body></html>";
webview.loadData(result, "text/html", Encoding.UTF_8.toString());

What Happens

I see the html code in the WebView as if I had set the mime type to plain text.

what happens html as plain text

What I'd Expect (and what happens in Android 4.x

I see the html in the WebView

There are a few things that have to be true to show the symptoms I am seeing:

Android 2.x (I was using 2.3.7 and 2.2)
The css has to be accessed via a url href="http://www.robotsidekick.com/test.css?rev=0" as opposed to href="test.css" (however it doesn't matter if it's a real css file href="http://www.thisisnotarealurl.fake/test.css?rev=0 causes the same problem)
The css must have a get parameter ?rev=0, but it doesn't matter what it is

Also wanted to note that the following did not make a difference:

Using the appropriate " instead of ' in the HTML
Having the link tag close itself or not
The contents of the css
Adding a doctype <!DOCTYPE html> to the HTML

i don't understand the issue. Are you saying the CSS doesn't load? — njzk2, Dec 20 '12 at 16:17
Sorry, I skipped over what I was seeing and what I was expecting. Edited to show that. — xbakesx, Dec 20 '12 at 16:29
I don't care if the css loads or not. The issue is that the with a fully qualified url, the html is rendered as plain text — xbakesx, Dec 20 '12 at 17:18
may be you need a doctype ? the strange thing is your example is really similar to what's in the documentation, so it should work — njzk2, Dec 21 '12 at 08:54
Oh, yeah I tried a doctype too, didn't make a difference. I'll add that to the question as a thing I tried. — xbakesx, Dec 21 '12 at 14:26
Anyone lese struggling with this, I had `"text/html; charset=utf-8"` in the `loadData` method and it caused this issue. You must simply have "text/html". — RunLoop, Jul 14 '16 at 13:55
Look at my answer here: https://stackoverflow.com/questions/30420949/webview-shows-source-html-with-loaddatawithbaseurl-not-rendered-view/54322301#54322301 — Salih Balkan, Jan 23 '19 at 08:00

score 6 · Accepted Answer · answered Dec 20 '12 at 16:13

Changing the webview.loadData line to this:

webview.loadData(URLEncoder.encode(result).replaceAll("\\+", " "), "text/html", Encoding.UTF_8.toString());

Solves this problem. It seems weird to me that a relative path with an unencoded ? doesn't cause problems, while a fake url with an unencoded ? does cause problems.

Also find it odd that the WebView changed enough in subsequent versions of Android that we don't have to go encoding our html anymore? That sounds fishy.

Android WebView shows plain text instead of html

1 Answers1

Linked