Chrome on android - not loading local website javascript and css

Question

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:

1. download file to local file system (not SSD! - external storage makes another problem!)
2. I unzip the package and go to the site in local storage using File Commander
3. 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 :/

Answer 1

I'm using Chrome under Android 10 on my admittedly budget tablet, but EVERY attempt to persuade Chrome to access CSS and JavaScript files fails on my tablet.

I've tried using a base href tag to specify a root directory to search - works on Windows/Linux desktop/laptop systems, fails on my Android Tablet.

I've tried specifying absolute paths of the sort "file:///sdcard/projects/test1/" in both the css link tag and the script tags for the JavaScript files - works on desktop/laptop, fails on my tablet.

Chrome appears to refuse categorically to load ANY additional resources regardless of what measures you take, if you try loading them from a local directory.

Apparently the only solution now is to install a web server on your Android device, spend however many hours or days it takes to configure it, then access your files using localhost, and at the moment, I'm not even sure that hassle will succeed. Chrome on Android appears to be operating in fascist lockdown mode with respect to ANY home written code that isn't accessed via a recognised web server.

Personally, I think it will be far less troublesome to install Firefox and perform my tablet testing using that, and tell Chrome where to get off. Which is a pity, because on desktop and laptop systems, Chrome's debugging dovetails beautifully with my workflow and operates at speed. Will report on whether or not using Firefox instead is successful in due course ...

... and that has now failed as well. Android 10 won't allow me to open ANYTHING in Firefox from my file explorer. Frustration level: Spinal Tap 11.

Also tried the above suggestion of storing the resource files in:

file:///sdcard/Android/data/com.android.chrome/files/Download/

This has failed as well.

The short version of the above: on my tablet at least, Android is locked down to the extent that it is IMPOSSIBLE to test home written web code that uses CSS and JavaScript files, unless a web server is installed (and I'm willing to bet even that will fail as well after I've tried - watch this space).

Answer 2

1. Install a text editor from playstore . Its name Acode
2. Got to your local file storage , then choose your .html file and press long time.
3. After press long time on .html file , you will see more (left side of your phone screen)
4. From more menu, chose open with option
5. Choose Acode text editor
6. 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)

Answer 3

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.

Answer 4

The only solution I found is to:

1. [update 2021] use Opera (Firefox did work before recent update!)
2. copy folder with my html/css/js to local storage (somewhere)
3. 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.

Answer 5

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.

Answer 6

Seems like the only directory Chrome reads local files from is file:///sdcard/Android/data/com.android.chrome/files/Download/

Answer 7

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).

Answer 8

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.

Answer 9

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.