Link to home
Start Free TrialLog in
Avatar of rfiddler
rfiddlerFlag for Canada

asked on

Using JavaScript to find the current site's root path

Hi, I'm trying to find a way of retrieving the root path of the current site using JavaScript

The point is so that I can save it to a variable for use in JavaScript image references etc.

So far, my best idea is to assign an id to one of the <link> tags in the <head> which will always refer to a specific folder in the root of the site, and then use my script to check the path in the href attribute and remove the portion of the path after and including that folder.

This works beautifully in every browser except for Internet Explorer, of course.  :(
I've found that this is a known quirk in all versions of IE up to and including IE7.

Other browsers return a full, qualified URI, where IE returns a relative path which does not work with my script.  

So, can anybody tell me how I can check an element in the <head> that references an external file to find a full address, or otherwise any other way to return the root path of the current site?

I hope this makes sense.

Thanks!!

~Rob
test.html:
------------------------------------------------------------------------------------
<link href="2008_templates/css/main.css" rel="stylesheet" type="text/css" media="all" id="mainCSS" />
<script type="text/javascript" src="../2008_templates/scripts/setPath.js"></script>
------------------------------------------------------------------------------------
 
setPath.js:
------------------------------------------------------------------------------------
var sSiteRoot = new String();
//sSiteRoot = "/main/_dev/ocotest3/";  //<-- hard-coding the site root path
 
setPath();
alert("sSiteRoot: " + sSiteRoot); //Testing
 
function setPath() {
  alert("link href: " + document.getElementById("mainCSS").href); //Testing
  alert("DocURL: " + document.URL); //Testing
   if (document.getElementById("mainCSS").href.indexOf("2008_templates")>0) {
    sSiteRoot = document.getElementById("mainCSS").href.substring(0,document.getElementById("mainCSS").href.indexOf("2008_templates"));
   }
}
------------------------------------------------------------------------------------

Open in new window

Avatar of Badotz
Badotz
Flag of United States of America image

Have you tried

var base_url = location.href;

?
SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of rfiddler

ASKER

Hi Badotz, that gives the address of the current page, which will be different on every site.  I'm looking for it to return an address with a folder name that will be the same on any site that it's used on.  

I'm also looking for any alternative method of finding the root address of whatever the current site is.

For example, if the current page (location.href) is http://www.something.com/stuff/morestuff/test.html, I want my script to return http://www.something.com/.

This will be used on many different sites, so the 'www.something.com' portion of the address is not known.

One consistency that i have is that my template support files (css, scripts, images etc.) are all contained in a '2008_templates' folder in the site root, so I'm thinking I should somehow be able to use this.

Thanks
Hi hielo.

Yeah, I should have mentioned that the root path is not necessarily the same as the root path on the web server.  It could be any subfolder as well.
ex:  http://www.something.com/siteroot/  or  http://www.something.com/stuff/siteroot/

The one constant is that each site will have a folder in the root called '2008_templates' that contains the template support files (css, scripts, images etc.).
ex:  http://www.something.com/siteroot/2008_templates/css/main.css  or  http://www.something.com/stuff/siteroot/2008_templates/css/main.css

Thanks for your help
>>Hi Badotz, that gives the address of the current page...

Right. So split on the '/' and pick the pieces you need:

[0] = 'http:'
[1] = ''
[2] = 'www.something.com'
[3] = 'stuff'
[4] = 'morestuff'
[5] = test.html'
Thanks Badotz, but my script needs to somehow know whether the root folder is 'stuff' or 'morestuff'.

The only way I can see so far is to somehow get the full address of an external, referenced file that is within the '2008_templates' folder.  But IE only returns relative paths when referencing href properties of a link element, and I'm not sure of how else I can do this.
I can't accomplish what I need by examining the path of the currently loaded page - it must be an external file within that folder as far as I can see.
>>The one constant is that each site will have a folder in the root called '2008_templates'
In that case try:
var rootkey='2008_templates';
var rootpath = location.href.substring( location.href.indexOf(rootkey)  + rootkey.length);
alert(rootpath);
Thanks hielo, but location.href returns the path of the currently loaded page, which will never be within the 2008_templates folder.

I need to retrieve the full path of a file that is referenced in the currently loaded page, such as a css file.

That's why I was using the code below.  But the problem is that Internet Explorer doesn't completely follow standards and (incorrectly) returns the value of the href property for the link element rather than a resolved address.
test.html:
<link href="2008_templates/css/main.css" rel="stylesheet" type="text/css" media="all" id="mainCSS" />
 
setPath.js:
sPath = document.getElementById("mainCSS").href

Open in new window

OK, but if you are accessing test.html as:
http://www.yoursite.com/somefolder/otherfolder/test.html

AND test.html contains:
<link href="2008_templates/css/main.css" rel="stylesheet" type="text/css" media="all" id="mainCSS" />
 
AND the css loads correctly, then the path to that css is
location.href minus the page/file name  plus link.href:
 
(http://www.yoursite.com/somefolder/otherfolder/test.html - test.html) + 2008_templates/css/main.css = http://www.yoursite.com/somefolder/otherfolder/2008_templates/css/main.css
 
 
Which is basically what I posted earlier (ID: 22284714), but you will need to append the href value of the link tag

Open in new window

Yeah, my point was that it might not be at the same level as the current page.

I'm thinking that I might just try grabbing the link tag's href relative path with getAttribute("href") and then compare it to the location.href and remove subfolders in the current path based on the number of occurances of '../'.  At least the relative path will tell me at what level in the site the currently loaded page is.

This is similar to what both of you suggested.

So I'll have to count how many '../' are present and use your script to split the location.href into an array and rejoin it from the start minus the sum of '../' in the relative path that I'd retrieved from the linkobj.href.

I'll post my final code after I've done this.

Thanks for your help.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
oh really??  Thanks!  I didn't know I could do that.

I'll work on it tomorrow morning and will let you know how it goes.  Thanks.
Ok I just tried it - problem solved.  Thanks!

Here is my code:
function setPath() {
  var sLinkHref = document.getElementById("mainCSS").getAttribute("href");
  var sPathToRoot = sLinkHref.substring(0,sLinkHref.indexOf("2008_templates"));
  var sLocHref = location.href.substring(0,location.href.lastIndexOf("/")+1);
  sSiteRoot = sLocHref + sPathToRoot;
}

Open in new window

I didn't realize that I could enter ../ in the path and just let the browser resolve it.  It's simple and makes sense now that I think about it.  :)

That makes the operation easy.

Thanks again!