Getting Web Url with SharePoint 2010 JavaScript API

There are multiple ways to get the current web url in SharePoint 2010 with the JavaScript API. I'll show you some different ways to get the url.

1.Way: Use global variable

There is a global variable "L_Menu_BaseUrl" which you can use to get the relative url. To get the full url use :

location.protocol + "//" + location.host + L_Menu_BaseUrl

 var url = location.protocol + "//" + location.host + L_Menu_BaseUrl  

The problem with this solution is that L_Menu_BaseUrl is a global variable and can be overwritten by other scripts or by other variables with the same name.

2.Way: Read attribute value

Read the href value of the top breadcrumb navigation node. There is a breadcrumb in every SharePoint site. You can just read the href attribute of the link, which always points to the web url.

 document.getElementById("ctl00_PlaceHolderSiteName_onetidProjectPropertyTitle").href  

The problem with this solution is, that when you habe other placeholder names (custom masterpage) or a site without a global breadcrumb the value will be empty or undefined.

3.Way: Use ctx variable within a list.

If you are creating a ribbon element for a list you can also use the ctx variable. This variable is created where a list webpart exists. To get the url of the web use the following:

 var webUrl = ctx.HttpRoot;  

The same problem as the first way. A global variable can be overwritten. Especially tctx is used very often used as variable name in other scripts and if a function doesn't use the var before the ctx variable, the variable is easily overwritten.

4.Way: Within the ASPX Site

If you are writing inline JavaScript Code directly within an aspx Site you can use shorcuts

 var url = "<%=SPContext.Current.Web.Url %>"  

The problem with this solution is that you can't use shortcuts js files.

5. Way: JS Client API

The safest way is to use the client javascript API, but it is also the most complicated way.
You have to understand how request are sent asynchronously and how they are handled with callbacks.

 ExecuteOrDelayUntilScriptLoaded(getWebProperties, "sp.js");    

 // Define namespace  
 NS = typeof NS == "undefined" ? {} : NS;  

 // Placeholder for web title  
 NS.WebURL = "";  

 NS.GetWebUrl = function(callback) {   
   var ctx = new SP.ClientContext.get_current();   
   var web = ctx.get_web();   
   ctx.load(web, 'Title', 'ServerRelativeUrl');   
   ctx.executeQueryAsync(  
     function() {//success
       NS.WebURL = web.get_serverRelativeUrl();  
       callback()  
     },   
     function() {//error
       NS.WebURL = ""  
       callback()  
     }  
   );   
 }    
 NS.AlertUrl = function() {  
   alert( "The relative url of the web is: " + NS.WebURL );  
 }

 // start call
 NS.GetWebUrl( NS.AlertUrl );  

In this example I first create a namespace NS. This is used to bypass method name collisions. Then I create a variable WebURL within the namespace to hold the web url.

The method NS.GetWebUrl ist the place where a request is send to the web service to get the title of the site. The request is sent async therefore we have to callback functions one for success and one for the error.
The method takes a callback as an argument, which is called after the reponse cames back from the server.

The AlertTitle funtion alerts the title of the site.