Home / Articles / Programming languages / Scripting languages / JavaScript / The base tag or how to turn relative addressing into absolute

The base tag or how to turn relative addressing into absolute

The base tag or how to turn relative addressing into absolute
The base tag or how to turn relative addressing into absolute
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.

There are a couple of cases where it is practical to use the tag base, for example, when the same images are in different structural parts of the site. Also if you frequently port HTML pages from your computer to the host server (the development is local and the ready material is being published) each time you have to rewrite the base tag, this might be a bit unpleasant, or utterly bugging. The situation can be resolved with the following script:

var url = document.URL.split( "/" );   //split url into parts
var base = "";
for( var i = 0; i < url.length-2; i++ )   //determine level of nesting (2)
//or for ( var i = 0; i < 3; i++ )   
base += url[i] + "/"; 
document.write( "<base href=\"" + base + "\" />" );   //writing the result

For every level of nesting you need to change only one digit. If there are many pages, the previous one can placed in a separate file, and where necessary write into the head:


  • doesn't work when viewed locally ( not with a web server);
  • for older versions of IE you must split document.URL.split ("\ \"), i.e. you need to additionally work with the script;
  • Opera does not understand the tag base in JavaScript.

You can try to resolve the situation more delicately:

document.write( "<base href='" + location.protocol + "//" + location.host + "' />" );

Thus, into any page we can input a string of JavaScript code that will turn all relative links into absolute.

Helpful information

The property location of the object window draws the attention back to the object location, whichF contains the information about the URI of the document opened in the window. In general, the URI looks like this:


The object location contains already mentioned URI fragments as properties that are available for reading and editing:




Anchor, i.e. part of the URI, following the "#" symbol (including #).


If the port is not equal null, this string looks like this hostname:port, otherwise it coincides with hostname.


Host and domain name or IP-address.


Full URI of the document.


The name of the file or path.


Port number specified in the URI of the document


Protocol specified in the URI of the document.


Request, i.e. part of the URI, following the symbol "?" (including ?).

In addition, this object has two methods:




Reloads the current document. Argument specifies the method of reload: true – reload from the server, false – reload from cache. If the argument is omitted, equals false.


Replaces the current document with the document with specified URI. The current document is deleted from browsing history.


Read also

Analyzing GET request with JavaScript

Analyzing GET request with JavaScript

jQuery for beginners: selectors

jQuery for beginners: selectors

Discussion (total 2 comments)

February 05, 2017 at 12:00 am
thanks due to the fact that this countless informative website, obstruct up the massive work check out this <a href=http://onlinecasinos-x.com>casino</a> offers
February 06, 2017 at 07:51 pm
thanks for this great informative website, finance up the momentous undertaking check out this <a href=http://onlinecasinos-x.com>online casino</a> offers

Post comment


Quick navigation

General navigation