I am having a little problem with the WebView in android.
When I load the following text in the WebView I am getting a strange character for e.g. the 's, and also some later on. The HTML is, printed to the Logger:
This week’s show is hosted by Fr. Gabriel Gillen, O.P. and Fr. Walter Wagner, O.P . The readings are: Acts 2:14A, 36-41; 1 Peter 2:20B-25; John 10:1-10. Click here to listen!<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=opeast.org&blog=23933483&post=18874&subd=dominicandaily&ref=&feed=1" width="1" height="1" />
The code to log and load the HTML is:
Log.d(iDomsAndroidApp.TAG, "HTML: " + article.getDescription());
webView.loadData(html, "text/html", "utf-8");
The resulting screenshot is:
Can anybody give me a hint how to fix this problem?
Try out by,
webView.loadData(myHtmlString, "text/html; charset=UTF-8", null);
Related
So I am trying to display a gif that I am pulling from reddit in a webview in my app. From the reddit api I retrieve a JSON of a posts data, and from media_embed/content I get the html of an iFrame from Gyfcat that looks like this:
<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&display_name=Gfycat&url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=gfycat" width="600" height="600" scrolling="no" title="Gfycat embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe>
To this I URLDecode it like so:
val gifData = json["media_embed"]["content"]
val decoded = URLDecoder.decode(gifData, "UTF-8")
And I display it like so:
feedItemWebView.settings.javaScriptEnabled = true
feedItemWebView.loadData(decoded, "text/html", "UTF-8")
This gives me something that looks like this:
Instead of using URLDecoder I also tried doing this:
val decoded = gifData.replace("<", "<")
.replace(">", ">")
.replace("&", "&")
And putting this in the WebView in the same way as above results in the webview loading, but just displaying a still image (and not the gif as expected) like this:
Is there something I am missing that I need to do in order for it to actually play the gif?
If I try putting the same thing into an html file like this:
<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&display_name=Gfycat&url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=gfycat" width="600" height="600" scrolling="no" title="Gfycat embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe>
my browser will load it correctly, so it must be something wrong with the WebView or my WebView settings
The issue was coming from a wrong configuration of the WebView. In fact, reading the logcat, this information came out from the webview:
I/chromium: [INFO:CONSOLE(26)] "Error reading storage", source: https://gfycat.com/assets/app.bfa24b4d87267ff469b0.js (26)
The iframe is loading an external script which use html5_webstorage also called localStorage. It is disabled by default in the webview (Security reason), so trying to access it was throwing an error which was preventing the video to play.
Therefore we need to turn it on like follow:
String data = "<iframe class=\"embedly-embed\" src=\"https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&display_name=Gfycat&url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=gfycat\" width=\"600\" height=\"600\" scrolling=\"no\" title=\"Gfycat embed\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen=\"true\"></iframe>\n";
webview = findViewById(R.id.webview);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setDomStorageEnabled(true);
webview.getSettings().setDatabaseEnabled(true);
webview.loadData(data, "text/html", null);
I tested it on a really simple project considering you already got the iFrame html.
I don't know much about html but there is a small issue and I am unable to find its solution.
This is the iframe that I want to display on static html page:
<!DOCTYPE html>
<html>
<body>
<iframe style="width:120px;height:240px; padding-right:50px; padding-bottom:50px" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=qf_sp_asin_til&ad_type=product_link&tracking_id=qstore51214-20&marketplace=amazon®ion=US&placement=0553496670&asins=0553496670&linkId=4f9912a00b832e2f8bcb5a9b187511cf&show_border=true&link_opens_in_new_window=true&price_color=333333&title_color=0066c0&bg_color=ffffff">
</iframe>
</body>
</html>
When I add this to html and try to open html page, I get the error:
"File not found".
But when I add this iframe to any live html editor it work perfectly and show the link.
Actually I want to display this iframe in Webview in my Andriod application.
My android code is:
mWebViewTopSeller = (WebView) findViewById(R.id.webViewTopSeller);
mWebViewTopSeller.setWebChromeClient(new WebChromeClient());
mWebViewTopSeller.setWebViewClient(new WebViewClient());
mWebViewTopSeller.getSettings().setJavaScriptEnabled(true);
mWebViewTopSeller.loadUrl("file:///android_asset/TopSeller.html");
Please help. Thanks!
When embedding this iframe, it returns an error:
SEC7111: HTTPS security is compromised by https://ws-na...
So it may have something to do with the browser's mixed-content/same-origin policy.
Possible src values are an absolute URL that points to another web site (like src="http://www.example.com/default.htm")
or an relative URL that points to a file within a web site (like src="default.htm" I think your src path is wrong.
I've seen this question a couple of times before but with no answers.
I have a Android app with a WebView. I load a HTML from a web service. Inside this HTML there are text, links and images.
Text and links are working but despite almost all images are well displayed there are some of them that show a blue quare instead of the image.
I've put a trace in my code:
Log.d("", "_htmlfrombackend="+_htmlfrombackend);
webView.loadDataWithBaseURL("", _htmlfrombackend, "text/html", "UTF-8", "");
And this is the output:
_htmlfrombackend=<p>text text text... <img width="200" height="300" alt="" src="http://www.mysamplesite.com/mysampleimage.jpeg" style="width: 200px; height: 300px;" />...text text</p>
That image is shown as a blue square. This is a screenshot:
So now I tried this:
String _newHtml = "<img width=\"200\" height=\"300\" alt=\"\" src=\"http://www.mysamplesite.com/mysampleimage.jpeg\" style=\"width: 200px; height: 300px;\" />"+_htmlfrombackend;
webView.loadDataWithBaseURL("", _newHtml, "text/html", "UTF-8", "");
And my webview shows this:
The first image is displayed well, the second one displays a blue square yet but they have the same img tag!
I've tried wrapping the html code between html and body tags but the results are the same.
This happens in Android 4.0, 4.4 and 5.0.
Anyone could have any idea of why my hardcoded image is shown correctly but the one from the backend is not?
Kind regards!
Edited to be more clear.
Edit: I've added images.
New EDIT: I've keep searching for a solution. I've had a deep reading of the HTML I receive and it's correctly formed, not malformed tags, just one strange thing, each img tag is inside a h2 tag, I mean:
<h2><img .../></h2>
But I tried to add these tags in my example with no difference:
String _newHtml = "<h2><img width=\"200\" height=\"300\" alt=\"\" src=\"http://www.mysamplesite.com/mysampleimage.jpeg\" style=\"width: 200px; height: 300px;\" /></h2>"+_htmlfrombackend;
webView.loadDataWithBaseURL("", _newHtml, "text/html", "UTF-8", "");
My image is still displayed while the image received don't.
New EDIT: I'm still looking for a solution, but I have a new clue. I've tried to show a wrong image:
String _newHtml = "<img width=\"200\" height=\"300\" alt=\"\" src=\"http://asdafsqwe\" style=\"width: 200px; height: 300px;\" />"+_htmlfrombackend;
webView.loadDataWithBaseURL("", _newHtml, "text/html", "UTF-8", "");
And my screen shows this:
As you can see, there is a square with a broken-image icon inside. This makes me think that the blue squares don't mean that there is a problem getting the image, there should be any other kind of problem.
In the HTML code img tag try src=new File( url ).toURI() for local files.
I am trying to show some basic html elements in a webview. I can do it with load datawithbaseurl method. But is there any way to check if content loaded correctly ?
Here is my html code coming from webservice.
<div style="float:left;margin:0;padding:0;top:0;bottom:0"><img src="http://exam.exam.com/upload/images/Activities/poskbhov.jpg" alt="" /></div>
and my webview code :
webView.loadDataWithBaseURL("", content.Content, "text/html", "UTF-8", "");
I just want to show an image. But i want to make sure its loaded. Right now i dont have an image. WebView just shows an img object in a div right now. I would like to put this image can not shown alert.
To link an image, build an String (HTML format) and code an IMG element:
String htmlContent = "<HTML>.....<img id=\"main_image\" src=yourImage.png alt=\"\"></br>.....</HTML>");
Load the content telling the webView were your resources are, and put your IMG in your "assets" folder with the name "yourImage.png"
webView.loadDataWithBaseURL("file:///android_asset/", htmlContent, "text/html", "utf-8", null);
You can also Link css file from here too!
If you want to see a full example, take a look to this project:
https://github.com/matessoftwaresolutions/AndroidHttpRestService
It consists on an HTTPService and, in the class HttpServiceFragment you can see a full (specific) implementation.
I hope it helps!!!
So I've searched around on SO a fair bit today and have made significant progress, but now I'm having an issue that I haven't seen pop up anywhere. I've embedded a YouTube video into an HTML file using an iframe as such:
<body>
<div align="center">
<iframe class="youtube-player" type="text/html" width="480" height="320"
src="http://www.youtube.com/embed/9DNAyD4ll6E?html5=1" frameborder="0">
</div>
</body>
and I'm displaying it in a WebView that I'm modifying in my activity like so:
WebView welcomeWebView = (WebView) findViewById(R.id.welcomeVideo);
welcomeWebView.setHorizontalScrollBarEnabled(false);
welcomeWebView.setVerticalScrollBarEnabled(false);
welcomeWebView.getSettings().setJavaScriptEnabled(true);
welcomeWebView.loadUrl("file:///android_asset/welcome.html");
The issue I'm having is that the still image display and controls show up, but when I click on play I'm presented with a gray screen that has a film strip and play icon in it. Here's the screen shots for the before/after for hitting play
http://www.ptrprograms.com/youtubeapp.png
http://www.ptrprograms.com/youtubeapp2.png
If anyone has seen this before or can point me in the right direction for displaying a video, I'd really appreciate it. Thank you!
EDIT: I also know that I can just use an intent to open it in a YouTube app, but my client (a non-profit that I'm donating this app to) is pretty specific about wanting it embedded into a page where we can have a textview with more information below it.
So I ditched the external asset for the webview and instead decided to load it in the activity itself, and it seems to work a lot better (it actually runs :))
WebView webView = (WebView) findViewById(R.id.welcomeVideo);
String play= "<html><body><div align=\"center\"> <iframe class=\"youtube-player\" type=\"text/html\" width=\"480\" height=\"320\" src=\"http://www.youtube.com/embed/9DNAyD4ll6E?rel=0\" frameborder=\"0\"></div></body></html>";
webView.setWebChromeClient(new WebChromeClient() {
});
webView.getSettings().setJavaScriptEnabled(true);
webView.loadData(play, "text/html", "utf-8");
webView.setBackgroundColor(0x00000000);