Windows location in JavaScript

The location interface allows to know the elements of the document's URL in the current window: the domain name, the file name, etc.

Location is an element of Window. This is a side-client (created by the browser) object and the interface is implemented in JavaScript since version 1.0.

In HTML 5, location is an interface integrated to DOM and also an attribute of HTMLDocument.

A URL is made up of a domain, a file name ...

Take the current page as an example of URLs to which we add all the possible parameters: 

https://www.xul.fr:80/javascript/window-location.php#content?name=value

It is splitted as follows: 

[http:]//[www.xul.fr]:[80][/javascript/windows-location.php]#[content]?[name=value]

Which, translated into attributes of the location object is: 

[protocol][host][port][pathname][hash][search]

The properties of location in the previous example have these values:

protocol http:
host [www.xul.fr]:80
hostname www.xul.fr
pathname /javascript/window-location.php
port 80
hash #content
search ?name=value

In addition, href corresponds to the full URL.

Location assigns these elements to attributs

Properties of location
protocol

Contains the protocol of the page, including the colon. 

http:

Or ftp: etc.

port

Port number, which is optional. The colon is a separator and is not part of the value of the property.

hostname

String composed of all sub-domains possible, the domain with its extension. Example: 

www.xul.fr
host

Combination of hostname + port. Example:

www.xul.fr:80
pathname

Directory and filename of the page. Example: 

/ecmascript/tutoriel/window-location.php
hash

The hash mark # introduces an address inside a page. Example: 

in /ecmascript/window-location.php#content, the anchor is content.
search

List of variables and their values. The code? is included in the value of the property. Example: 

?nom=valeur&nom2=valeur2

It will be easy with the demonstration script to try all possible combinations and see values returned.

It has methods to change the URL of the page

Methods of location
assign

The method allows to change the location to load a new page. Example: 

window.location.assign("https://www.xul.fr/ecmascript");
reload

Reload the same page that is currently displayed. 

windows.location.reload();
replace

Replaces the displayed page by another. The history becomes that of the replacing page.

window.location.replace("https://www.xul.fr/ecmascript/");

The difference between assign and replace is that after replace the back button is disabled.

Example of using location to change the components of the URL

The location properties can be read or assigned.
For example the path of the page may be displayed: 

document.write(location.pathname)

And the page is changed the way: 

location.href = "url"

The reload method allows also to reload the page according to the new URL.

The demo allows you to enter a URL in a form, displays the properties and execute the methods of the object and view properties so changed. 

var url = document.loc.url.value;
var storage = document.getElementById("storage");

var href = "href  " + location.href 
var protocol = "protocol " + location.protocol 
var hostname = "";//"hostname " + location.hostname 
var port = "port " + location.port 
var host = "host " + location.host 
var pathname = "pathname " + location.pathname 
var hash = "hash " + location.hash 
var search = "search " + location.search 

var data = href + protocol + hostname + port + host + pathname + hash + search;
storage.innerHTML = data;

To use the demo, we change the parameters of the URL that must remain that of the demo page if you want to view these parameters with the "properties" button.
The other buttons call the methods of their label.

Demonstration of the value of properties of the Location interface in JavaScript, and its methods.

Enter a modified URL and click on Properties to display them in the page, on on other buttons to execute a method.
The page must be this demo to have a Properties button or any page you have uploaded that contains a script to display the properties, as the script in this page does.

Demonstration

URL

Full code of the demo:

function properties()
{
  var url = document.loc.url.value;
  var storage = document.getElementById("storage");
  var href = "href  " + location.href ;
  var protocol = "protocol " + location.protocol;
  var hostname = "";//"hostname " + location.hostname;
  var port = "port " + location.port;
  var host = "host " + location.host;
  var pathname = "pathname " + location.pathname;	
  var hash = "hash " + location.hash;
  var search = "search " + location.search;
  var data = href + protocol + hostname + port + host + pathname + hash + search;
  storage.innerHTML = data;
}

function replace()
{
  var url = document.loc.url.value;
  window.location.replace(url);
}

function reload()
{
  window.location.reload();
}

function assign()
{
  var url = document.loc.url.value;
  window.location.assign(url);
}

See also

© 2008-2012 Xul.fr