PhoneGap Relative URL

Question

I've build a mobile site using jQTouch, and now I've been working to get that same site working with PhoneGap. For PhoneGap, I've moved most all of the assets (pages, images, JS, CSS, etc.) into the www directory, but I still need to load some dynamic content via Ajax. From the mobile site, I'm using relative URLs to load additional content. However, with PhoneGap, I haven't found a way to use relative URLs to access my mobile site and have been forced to use absolute URLs. My question is this: Is there a way to use relative URLs with PhoneGap? Maybe something like setting a base URL during the PhoneGap initialization?

Answer 1

When using PhoneGap the main files will be on the phone so relative files will be relative to the location on the phone.

If you need to access a file on a remote server (your mobile site) then it must be specified absolutely.

If your main HTML page within your PhoneGap app is at file://www/index.html and you try and access a relative file (say "logo.png") and so specify <img src="logo.png" /> you're really getting it from file://www/logo.png.

If you actually wanted the version of logo.png which is actually on your remote website, you have to provide the full (absolute) path or there's no way for the browser to know that when you specify "logo.png" you mean the one at "http://www.your-site.com/logo.png".

Answer 2

You can try using the <base> tag. This will set your Base URL to whatever you need:

<base href="http://yourdomain.com/">
<script src="js/remotescript.js"></script>

Note this means now your local scripts need to be in absolute form:

<script src="http://localhost/js/phonegap.js"></script>

See this other question for more info regarding this note. The guy there suggests to prepend a dot (.) before the local relative URL, though I didn't test this:

<script src="./js/phonegap.js"></script>