How to load and import a CSS/JS file from the phone in phonegap?

Question

I use a javascript code to download a CSS file to the phone.

The code works well and it saves the CSS file in this path:

file:///data/user/0/com.my.app/files/file.css

Now I want to locally load it with a html code (in my server) like this:

<link rel="stylesheet" href="file:///data/user/0/com.my.app/files/file.css">

but it doesn't work.

I also tried to put the CSS file directly into the package (.apk and .ipa) in a css folder in the www folder, but this code doesn't work too:

<link rel="stylesheet" href="file:///android_asset/www/css/file.css">

Is there a way to load a CSS/JS file locally from the phone?

EDIT:

My phonegap application has a index.html file in the www directory that simply redirect to my server (ie. http://www.myserver.com). What I want to do is importing CSS or JS files in my server and take them directly from the phone.

Maybe can I use a iframe (in the index.html file) and load there all the code in my server instead of using a redirect?

Answer 1

In your second attempt, you placed the file in the css subfolder of the www root folder. That's the right way to do it, but then you need reference it using a relative path like this:

<link rel="stylesheet" type="text/css" href="css/file.css" />

Edit

First of all, if your app is redirecting to the server, Apple and maybe other stores will reject your app. According to Apple's guidelines, your app must have functionality beyond being just a "repackaged website".

Having said that, since you're redirecting to the server, so your CSS (and JS) is best left on the server and not imported locally. Just make sure your webpage works properly in browser and links to the CSS file on the server in the standard way, and it will work properly when your app redirects to it.

Of course, you need to whitelist your website, but I assume that you've already done that.