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?

Rigamarole

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

Nixon

Thanks Matt. I thought that might be the answer. It would be cool if PG had an init which took a base URL. Would definitely help when porting from an existing mobile. Would make my Rails app simpler in that it wouldn't have to output different views. – Rigamarole

check this out, you can have PhoneGap reference an external root path, like your staging environment or your local server: joeldare.com/wiki/open_a_url_in_phonegap – Turpeth

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>

Crinose

Answer 3

I know this is 6/7 years old, but for any others arriving here for the same question... Here's a solution, since there isn't a more "packaged" one:

3 quick steps:

1) Store your site domain in a global javascript variable

var currentloc = 'https://example.com'

2) Use temporary variable to add your relative path to currentloc

var relpath = '/need/jsonex'
var ajaxcall = currentloc + relpath
$.ajax({...

3) Adjust currentloc if you do change the supposed "location" that you're calling relative path from on site

currentloc = currentloc + '/new/path'

** just remember if you make currentloc a global variable you need to keep track of these changes.

Hope this helps.

Rhoads