Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android webview rendering nothing after "#" character

I have an android application and I need to show a webview with my custom website. My problem is that the webview renders nothing. After using the "Element inspector" I could see that any HTML was being displayed after the first "#". For example, if my web is:


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>a</title>
        <style>
            html {
                color: #ff0000;
            }
        </style>

    </head>

    <body>
        <h1>My awesome title</h1>
    </body>
</html>

the rendered HTML on the webview will be:


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>a</title>
        <style>
            html {
                color: 
    <body>
    </body>
</html>

I can use rgb colors. But I want to know what is going on here. Another example to clarify my problem is:


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>a</title>
        <style>
            html {
                color: rgb(255, 0, 0);
            }
        </style>

    </head>

    <body>
        <h1>My awesome #title</h1>
        <p>this won't be displayed</p>
    </body>
</html>

the rendered HTML on the webview will be:


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>a</title>
        <style>
            html {
                color: rgb(255, 0, 0);
            }
        </style>

    </head>

    <body>
        <h1>My awesome </h1>
    </body>
</html>

Thanks for the help

like image 709
Iván Rodríguez Torres Avatar asked Dec 29 '25 05:12

Iván Rodríguez Torres


2 Answers

The solution for me was to replace # with %23.

This change to the webview was introduced with the Chrome 72 update on 30th of January.

This pull request seems to be the reason why webview is broken after #: https://chromium-review.googlesource.com/c/chromium/src/+/1297172.

like image 124
Nejc Avatar answered Dec 31 '25 17:12

Nejc


I've implemented Iván's solution, and it works perfectly:

import android.util.Base64

fun loadBase64EncodedHtml(webView: WebView, html: String) {
    val encodedHtml = Base64.encodeToString(html.toByteArray(Charsets.UTF_8), Base64.NO_PADDING)
    webView.loadData(encodedHtml, "text/html", "base64")
}

and use it with:

val myHtmlContent = "<p>Your HTML content with special characters like #, but don't touch <a href="http://somewhere.com#fragment2"> .</p>"
loadBase64EncodedHtml(yourWebViewInstance, myHtmlContent)
like image 31
Amir Uval Avatar answered Dec 31 '25 18:12

Amir Uval