Issue with Chrome on android causing local website javascript and css to not load properly

The issue I am experiencing is unique to Chrome for Android when accessing a local website.

Interestingly, the site functions perfectly on Firefox for Android but encounters problems on Chrome.

Specifically, on my website , there is a download link for a zip file.

Here's my process:

  1. I download the file to the local file system (not SSD - external storage presents another issue!)
  2. After unzipping the package, I navigate to the site in local storage using File Commander
  3. When I open the HTML file with Chrome, only the HTML content loads - CSS, JS, images, and fonts are not displayed.

It seems like there may be an issue with relative paths causing this problem?

However, it's worth noting that Firefox does not have this issue.

A viable workaround is using Firefox, although you do need to input a specific path: "file:///storage/emulated/0/..../...html" But... Considering Chrome is predominantly used on Android devices, it's frustrating that local sites don't work as expected :/

javascriptandroidcssgoogle-chromelocal

Answer №1

Instead of using file explorer, you'll need to manually input the path in the address bar like file:///sdcard/Download.... Using JS typically works with Chrome when dealing with local html files on my Galaxy S6.

Answer №2

After extensive trial and error, I have come to a solution that works:

  1. [recently updated in 2021] Switch to using Opera as Firefox may no longer be compatible.
  2. Transfer the folder containing your html/css/js files to local storage location (anywhere convenient).
  3. To access the site, use the following paths: [current version of Opera] file:///storage/0000-0000/MyFolder/index.html [for older versions of Firefox] file:///storage/emulated/0/myfolder/index.html

The main path to local storage is 'file:///storage/0000-0000/' OR 'file:///storage/emulated/0/'. If your folder is nested further down, adjust 'myfolder' to reflect the correct directory structure, such as /somefolder1/somesubfolder/.../ etc.

It's unfortunate that this workaround seems to be the only way to develop a web browser app for Android devices.

Answer №3

You can easily achieve this by using a HTTP server application on your smartphone.

One option is to use the SimpleHttpServer app.

Simply configure the "Document Root" within the app settings to point to the folder where your HTML files are stored. Start the server and you will be provided with a local link.
Click on the link and select the HTML file you wish to display.

If you have specified your assets using relative paths, those assets will also be loaded properly.

Answer №4

It appears that Chrome only accesses local files from the directory 

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

Answer №5

I finally found a solution that worked for me on Android - using the HTTP Web Server app (specifically, Simple HTTP Server).

No luck with different browsers: In April 2021, I experimented with installing various browsers like Chrome, Firefox, and even Opera on my Android device, but none of them solved my issue. Whenever I tried to access HTML/JS files using local `file:///` URLs such as `file:///sdcard/` or `file:///storage/emulated/0/`, the browsers only displayed folders without showing any files. It wasn't until I used the absolute path to the HTML file that the browsers utilized the `content:///` protocol to display static HTML content, preventing the execution of JavaScript code.

Answer №6

When using Android OS version 7, I encountered the need to open a local HTML file with CSS and JavaScript in the Google Chrome browser (version 64.0.3282.123). Surprisingly, in order to do this, I had to enter file://localhost/sdcard/ into the address bar before navigating to the file location. Despite specifying sdcard in the address, the browser opened the internal storage instead of the actual removable SD card present on my device.

Answer №7

Recently, I have encountered a similar issue as well. Chrome is currently not able to link to other files on the device directly. However, you can still incorporate JavaScript and CSS using <script> and <style> tags in your web page. Unfortunately, for files such as images, audio, videos, etc., accessing them on Android without a server established by third-party apps remains a challenge.

Answer №8

While using Chrome on my Android 10 budget tablet, I have encountered persistent issues when trying to access CSS and JavaScript files.

Attempts to set a base href tag for the root directory search, which usually works on Windows/Linux systems, have failed on my tablet.

Even specifying absolute paths like "file:///sdcard/projects/test1/" in the css link and script tags has proven unsuccessful on my tablet, despite working on desktops and laptops.

It seems that Chrome on Android flat out refuses to load any additional resources from local directories no matter what workaround is attempted.

One potential solution could involve setting up a web server on the Android device and accessing files through localhost, though there's uncertainty about the success of this approach given Chrome's restrictive behavior towards locally sourced code.

Considering switching to Firefox for tablet testing as a less troublesome alternative to dealing with Chrome's limitations, especially since even attempting to use Firefox has hit a roadblock on Android 10.

Even storing resource files in the suggested directory "file:///sdcard/Android/data/com.android.chrome/files/Download/" did not yield positive results.

In conclusion, testing home written web code with CSS and JavaScript files on Android tablets appears to be virtually impossible without installing a web server, highlighting the stringent restrictions imposed by the operating system on such activities.

Answer №9

  1. Download a text editing app called Acode from the Play Store.
  2. Navigate to your local file storage and select your .html file, then long press on it.
  3. After long pressing on the .html file, you will see additional options on the left side of your phone screen.
  4. Choose the "open with" option from the menu.
  5. Select Acode as the text editor to open the file.
  6. Once the html file is open in the Acode editor, preview it within the app. That's all! It should work perfectly. (Please excuse any language errors)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving information from a JSON object in Angular using a specific key

After receiving JSON data from the server, I currently have a variable public checkId: any = 54 How can I extract the data corresponding to ID = 54 from the provided JSON below? I am specifically looking to extract the values associated with KEY 54 " ...

javascriptarraysjsonangulartypescript

Execute an Xcode iOS project on an Android device

After successfully creating an iOS app in Xcode 6.1.1 using Objective-C, my next goal is to port it to Android. During my research on the internet, I came across two options: Marmalade and apportable. It seems that the only way to use apportable is to con ...

androidiosobjective-cxcodeporting

Python Selenium tutorial: Navigating inner scrollbars on websites

Struggling to implement scrolling within a container with its own scrollbar. Various methods have been attempted, but none have succeeded or met the desired standard. Here is the HTML code snippet of the scrollbar: <div id="mCSB_2_dragger_vertical ...

pythonhtmlcssselenium-webdriver

JavaScript: Reorder an array to alternate between largest and smallest elements, starting with the largest

When working with an array of integers that need to be sorted in a specific order, such as: [1, -1, -3, 9, -2, -5, 4, 8,] We must rearrange them so that the largest number is followed by the smallest number, then the second largest number followed by the ...

javascript

Vuex: Clearing all data from the store and setting it back to an empty array

My Vuex store has a state variable called scannedList, which is initially set to an empty array []: state: { scannedList: [] } I have a mutation that adds ids to this array. I attempted to clear the entire state by using: store.commit('addToScann ...

javascriptvue.jsvuejs2vuex

What is causing my program to invoke axios twice?

Struggling with setting profile state using redux and encountering the issue of axios being called twice for some reason. Here is my database profile.js: const mongoose = require("mongoose"); const Schema = mongoose.Schema; // Create Schema const Profil ...

javascriptreactjsaxios

Discovering the variable name that holds the maximum number following the usage of Math.max()

Let's assume we have the following variables set: var number1 = 48; var number2 = 420; var number3 = 39; If we want to determine the highest value among them, we can use: let maximumValue = Math.max(number1, number2, number3); What if we want to kno ...

javascript

Utilize the useRef hook to dynamically retrieve the updated height when children are altered

I am working with an accordion component and using the useRef hook to measure the height of the children. However, I noticed that when I update the content of the children dynamically, the height measurement does not get updated unless I click on the toggl ...

javascriptreactjs

Button side features an inverse curve shape

I've come up with a design for some "button tabs" where one side is curved, making it tricky to implement border radius. I'm wondering if this kind of curve is even possible without using images. Any tips on how to achieve this or any resources I ...

htmlcss

What is the best way to establish a link between the index and the JSON object?

I am working with a JSON object that maintains a specific sequence within it. var sample={ "sample": [ { "example": [ { "sequence": 1, }, { "sequence":2 }, { "sequ ...

javascriptjqueryjsonjsrenderjsviews

The art of masonry is not effective

I'm having trouble getting the Masonry cascading grid layout library to work in my code. Stylesheet: .post { background: #FFF; padding: 10px; border-bottom: 3px solid #e6e6e6; width: 30.7%; margin: 10px; } Source code: <div ...

javascriptjqueryhtmlcssmasonry

Activate each division separately with a single script

I am facing an issue where each blue div (<div id="rectangle"></div>) is not firing independently when hovered or clicked. Currently, when I hover/click over the first one, both fire simultaneously. However, if I hover/click over the second on ...

javascriptjqueryhtmlcss

Styles in print CSS are not effective in an Angular project

Currently, I am working on an Angular project where I need to generate a printable document using CSS. The challenge I am facing is ensuring that the date and title in the header do not print automatically when the document spans multiple pages. Additional ...

cssangularprinting

issue with displaying popover component using React with Material UI

A React component I created has 6 different experiences, each triggering a popover with an array of images. The popovers are implemented using Material UI, and while they work, there are some console errors that I'm unsure how to resolve. Below is th ...

javascriptreactjsmaterial-ui

Angular is throwing an error when trying to create a new service: "Workspace must be loaded before it can be used."

Having trouble adding pusher.js to my angular.json file. After trying to create a new service, I encountered the following error: Error: Workspace needs to be loaded before it is used. Any tips on how to resolve this? I attempted to update the angular cl ...

javascriptangulartypescript

Conceal the div by clicking outside of it

Is there a way to conceal the hidden div with the "hidden" class? I'd like for it to slide out when the user clicks outside of the hidden div. HTML <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.c ...

javascriptjqueryhtmlcss

Show the values of the buttons within the text input field

check out this jsfiddle example $("#dialog").dialog({ autoOpen: false }); $("#opener").click(function() { $("#dialog").dialog("open"); }); <html lang="en"> <head> <meta charset="utf-8> <title>demo on dialog</title> ...

javascriptjqueryhtml

Ways to split text across lines within my list

I am currently developing a shopping list app and everything is running smoothly. However, I am encountering an issue with breaking a long string into the next line. Even though I tried using word-wrap, it doesn't seem to work as intended. For exampl ...

javascriptjqueryhtmlcss

Create a Dynamic Moving Background Image with Endless Scrolling

Is it possible to make a background image animate infinitely and only move upwards without any jerkiness? I am struggling with setting it up this way. Can anyone provide guidance on achieving this? If you need more context, here is the link to the webpage ...

htmlcsswordpressjquery-animatecss-animations

Exploring Bootstrap datatables to search through nested table data with Codeigniter

I have implemented a table using bootstrap datatables and successfully enabled search functionality within the table. However, I have also included nested tables within each row of the main table. These nested tables are supposed to be displayed when clic ...

javascriptjqueryhtmltwitter-bootstrapcodeigniter