Images not loading when JavaScriptEnabled in android webview - android

I have a android web view
webview = FindViewById<WebView>(Resource.Id.webView);
I load the htmlData from the url like so:
webview.LoadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);
The content includes text, images and embedded youtube videos.
In the case above the text and images load correctly but not the videos as i have not enabled Javascript yet.
Therefore i enable JavaScriptEnabled.
webview.Settings.JavaScriptEnabled = true;
webview.Settings.DomStorageEnabled = true;//This does not make any difference
However, when i do enable Javascript the images no longer load within my webview but the videos do.
After debugging, I can see that the entire image tag is being replaced with &nbsp
So i would like to know how to have javascript enabled and have my images still load within my htmldata at the same time.

I guess JavaScript may change the src attribete of img tag.
You can do RemoteDebug of webview. Let's check the html dom.
developers.google.com/web/tools/chrome-devtools/debug/…

Related

How to handle which tab is opened by default when loading an HTML in a WebView?

I want to load an HTML in a webview in my application that contains multiple tabs, something similar to this : https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators
In my code I simply take to html text and load it in the webview:
webView.setBackgroundColor(getColor(transparent));
webView.getSettings().setJavaScriptEnabled(true);
webView.loadData(htmlContent, MIME_TYPE, null);
How can I handle in code so that one specific tab to be open by default when we first enter the page?
After loading the content you can execute Javascript in the WebView like
webView.loadUrl("javascript:openCity('Paris');");
or with Kitkat and up
webView.evaluateJavascript("openCity('Paris');", null);

android webview can not show content by loaddatawithbaseurl sometime

I use webview to load local html data like this
webview.loadDataWithBaseURL("about:blank", finalSrc, "text/html", "UTF-8", null);
the finalSrc is a variable of html string.
sometimes, the webview can display the corrent content,but sometimes not.
and I found that if I clear the cache of my app, the webview works well again.
so what's wrong with my app?
rather than using BaseUrl why don't use loadData. for example
webview.loadData(finalSrc, "text/html", "UTF-8");

Android Webview displays content as Raw HTML

I am using the following code for rendering a dynamically created html string on a webview. It works properly on my device. But on one of the user's device, the webview displays the raw html tags and content instead of rendering properly.
I cannot reproduce the issue on my devices. What can be cause for this issue to happen. Any device level settings? or Encoding related issue?
String htmlContent = "<html><body> .... </body></html>";
webview.loadDataWithBaseURL(null, htmlContent, "text/HTML", "UTF-8", null);
Try this code. It works for me.
WebSettings settings = mDesc.getSettings();
settings.setDefaultTextEncodingName("utf-8");
mDesc.loadData(mDescText, "text/html; charset=utf-8",null);

Android: Loading AMP Formatted HTML into a WebView

I'm retrieving Accelerated Mobile Pages (APM) formatted HTML form a webcall. I'm then trying to display that AMP in a WebView. So I'm setting up my WebView like this:
webView = (WebView) findViewById(R.id.web_view);
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setJavaScriptEnabled(true);
String content = article.getContentAmp();
webView.loadData(content, "text/html; charset=utf-8", null);
It displays content without error, but it's not displaying correctly. It ignores for example amp-youtube elements and embeded tweets.
Is there something else I have to do with the WebView or the WebChromeClient to display AMP correctly?
EDIT:
The answer below works. But in my specific case, I was using the WebView inside a NestedScrollView. Which worked fine in Android 5.0+, but below that, the amp- elements would not load.
Taking the WebView out of the NestedScrollView solved the problem. It's parent is now a relative layout.
So if you're having the same problem, try simplifying your layout so that the WebView is not deeply nested. And definitely don't put your WebView inside a NestedScrollView.
You cannot display elements such as embedded youtube videos, images, tweets etc without giving the WebView a base url. The solution was to use webview.loadDataWithBaseUrl instead on webView.loadData. You must pass it a valid url.
webView = (WebView) findViewById(R.id.web_view);
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setJavaScriptEnabled(true);
String content = article.getContentAmp();
String baseUrl = extractUrlFromContent(content);
webView.loadDataWithBaseURL(baseUrl, content, "text/html", "utf-8", "");

Using webView's loadDataWithBaseURL not loading images from sdcard

I would like to set some html content in my webview with some pictures.
I've read on the internet i must use loadDataWithBaseUrl to do such a thing because i need to link the folder of images (basUrl) in order.
My html content nicely loads, i can even ran the javascripts perfectly, but for some reason my images cannot be loaded.
Somewhere i've read there are some security reasons and thats why i cant load images from sd card to webview and some says it can be easily done via loadDataWithBaseUrl, so i really dont know which one is true.
Here is my method i tried, maybe with some mistakes so dont be rude:
I got my html file here:
mnt/sdcard/com.mypackage.myproject/3/3.html
My images are here:
mnt/sdcard/com.mypackage.myproject/3/images/Cover.png
And this is my content loading:
myWebView.loadDataWithBaseURL("file:///mnt/sdcard/com.mypackage.myproject/3", myHtml, "text/html", "utf-8", "");
In my html code:
<img src="images/Cover.png" alt="Cover.png" height="820"/>
So as you see i give the baseUrl, and for some reason the webview cannot load my images.
As many said, this can be a solution:
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setAllowFileAccess(true);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setBuiltInZoomControls(true);
String base = Environment.getExternalStorageDirectory().getAbsolutePath().toString();
String imagePath = "file:/"+ base + "/test.jpg";
String html = "<html><head></head><body><img src=\""+ imagePath + "\"></body></html>";
mWebView.loadData(html, "text/html","utf-8");
BUT, i have 700 different html files and there are many images in many different places... so i cannot modify the html code.
Is there a way to link the image folder to my html files to properly use them as a baseUrl?
You have a syntax error in your loading statement. You have to put : after file
myWebView.loadDataWithBaseURL("file:///mnt/sdcard/com.mypackage.myproject/3", myHtml, "text/html", "utf-8", "");
You don't need to put full path of your image into html.
img src="images/test1.jpg"
Instead
img src=\""+ imagePath + "\"

Categories

Resources