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
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.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With