I am a beginner to Android App Development. I am creating a Code Editor app (that would allow developers to edit and run their html files) by using Java along with html, css and javascript (via WebView). I could easily accomplish the edit part but the problem is with executing any html file.
My first try was to use iframe with a src pointing directly to the file in sdcard-
<iframe src="file:///storage/emulated/0/<file-name>.html"></iframe>
But with this code, the problem is that the app immediately crashes when this iframe loads. Not only iframes any kind of request sent to a route in sdcard from the webview immediately crashes the app.
I find various solutions on internet but they all just add a JavascriptInterface that can be used to display images on webview. But that's not the case with me as you know the code that I want to execute is dynamic
and must be able to access any kind of file that is accessible to a html file in a normal browser and also that the entire sdcard, though can be referenced in html codes, cannot be copied to assets folder. With these circumstances, all answers on internet are no helpful for me.
Summary- I want to view the output of any html code, stored in sdcard of users, in such a way that the output appears similar to what it would in a browser, that is by using Java and WebView Please help.
Edit-
I want the solution to be by use of a iframe, which can be completely accessible to entire WebView.
I'm struggling to download a simple text generated by cordova app to device. It is simple in browser, but I can't make it work on Android (see Cordova file plugin not working when I try to download img on android).
Is there an easier way to save file on disk? Or maybe get access to database?
I am at my whit's end.
Have you try to use :
window.requestFileSystem
or
window.resolveLocalFileSystemURL
Where is you text generated ? In memory or locally into device ?
It can be done with the File plugin, but there are a few moving parts to get it working properly:
You need to write to a sandboxed directory (either cordova.file.externalDataDirectory or cordova.file.dataDirectory), as of Android 10/11.
You need to add WRITE_EXTERNAL_STORAGE permission to your config.xml (to add to your Android app's manifest.xml)
You need to have the appropriate runtime permission as well if you're accessing external storage.
(see How to get documents in an android directory that PhoneGap will see for code snippets)
Having done that, you'll be working with the FileWriter to write the text to a Blob.
If you need a leg up, you can take a look at my app (I've got a text writer at about line 3239 of this file: https://github.com/adapt-it/adapt-it-mobile/blob/master/www/js/views/DocumentViews.js). It also handles copying the text to the clipboard using the Cordova-clipboard plugin, which might be of use.
Here is a link to the website so you can see what is going on - https://odonnelldigital.com/
The site loads with all images on any web browser when I copy the full path locally.
So, the most common errors I keep getting from google seem to be the image file being in the wrong directory. I've tried this multiple times, but no joy.
I'm using HTML, CSS, bootstrap & JS I've hosted on GoDaddy, and I'm using the cPanel.
Even the favicon won't load! I've tried changing permissions too on the folder and the images/files themselves.
Any help would be really great! Thanks!
Problem:
Your problem is because you are trying to load a local file on your computer.
And since it is locally stored, other users on the web can't access it.
Solution:
Upload the image files, the favicon, and other files to your web server and change the src attribute to the file on your site.
You should check the path to the images in your html code. It is found in the src attribute in the image tags. If you take a look at the command console in chrome's dev tools, it states that your images point towards your C drive, which lives in your local development computer. You should put paths to the images relative to where the html file lives.
I have strange problem on Chrome for Android with local website.
It works perfect on Firefox for Andorid, but not for Chrome.
On my site here: https://passcombo.com there is download link with a zip file.
What I do is:
download file to local file system (not SSD! - external storage makes
another problem!)
I unzip the package and go to the site in local storage using File Commander
I open the html file with Chrome - only HTML loads, no CSS, no JS, no images, no fonts.
Looks like there is path problem with relative paths?
But firefox works!
Working alternative is Firefox, but there you need to write correct strange path: "file:///storage/emulated/0/..../...html"
But...
Currently Chrome is mostly used on Andorid so it's bad local sites not working :/
It doesn't work opening with file explorer, you have to write the path in the address bar file:///sdcard/Download... or wherever.
JS works with Chrome on local html file in my Galaxy S6.
The only solution I found is to:
[update 2021] use Opera (Firefox did work before recent update!)
copy folder with my html/css/js to local storage
(somewhere)
open the sitewith path like:
[current Opera] file:///storage/0000-0000/MyFolder/index.html
[old in firefox ] file:///storage/emulated/0/myfolder/index.html
where 'file:///storage/0000-0000/' OR 'file:///storage/emulated/0/' is the main path to local storage, and if you copied your folder somehwre deeper then you need to change the 'myfolder' to /somefolder1/somesubfolder/.../ sth
Shame it's the only way to create a web browser app for adroid.
It is possible using a HTTP server app on your phone.
For example the SimpleHttpServer.
Set the "Document Root" in the settings of that app to the folder in which your html files reside. Start the server and you will see a local link.
Click on that link and choose the html file you want to show.
If you declared your assets relatively those assets will loaded, too.
Seems like the only directory Chrome reads local files from is file:///sdcard/Android/data/com.android.chrome/files/Download/
The only solution worked for me in Android is the HTTP Web Server (I used Simple HTTP Server).
Installing different browsers didn't help:
(Apr-2021) I tried installing various Browsers (Chrome, FireFox, even Opera etc.) in Android but none worked. In all cases, when I navigated to the folder containing HTML/JS files using local file:/// URLs ('file:///sdcard/' or 'file:///storage/emulated/0/') browsers only displayed the folders but no files.
When I used the absolute path to the HTML file the browsers used content:/// protocol to
render static HTML content, i.e. it did NOT allow execution of JavaScript code.
In my Android OS version 7, to open a local html file with css and javascript in Google Chrome browser (ver. 64.0.3282.123) I have to open it through an address bar typing as file://localhost/sdcard/, then navigating to the file location. In spite of mention sdcard in the address, it opens an internal storage (and my device has actual removable sdcard as well).
Currently, I am also facing this problem. Chrome does not link to other files on the device, but you can use js and CSS by, using <script> and <style> tags and these will be included in the web page. But, for other files, like image, audio, videos, etc. it can't be done on Android still without any server established by 3rd party apps.
Install a text editor from playstore . Its name Acode
Got to your local file storage , then choose your .html file and press long time.
After press long time on .html file , you will see more (left side of your phone screen)
From more menu, chose open with option
Choose Acode text editor
When html file open on Acode editor, then preview it from Acode text editor.
that's all. It will works 100%.. (sorry for my english)
I'm trying to link this page http://www.bauer.uh.edu/parks/f1471m.htm to my text editor ( text mate) with a mac.
I even copied the code and pasted it into an HTML file, and made a .js file (the one I'm trying to use to practice with) in the same folder and to use the local tag with no success.
I tried using src="http://www.bauer.uh.edu/parks/f1471m.htm" with no luck.
am I doing something wrong?
I'm making a few assumptions here...
From what you're describing, I think you're trying to directly edit the file. Unless you have write access on that server, what you're doing isn't going to work. Some web development software will allow you to do this, but most text editors don't.
Can you work on the file locally (on your computer's file system) and upload it to the server through FTP?
Many browsers give you the ability to save a page locally these days. That would set up the proper structure for you on your own machine. (FireFox can do this using Save Page)