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:

Difficulties:

  • 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:

protocol://host:port/path#anchor?request

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

Property

Description

hash

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

host

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

hostname

Host and domain name or IP-address.

href

Full URI of the document.

pathname

The name of the file or path.

port

Port number specified in the URI of the document

protocol

Protocol specified in the URI of the document.

search

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

In addition, this object has two methods:

Method

Description

reload(flag?)

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.

replace(URI)

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

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation