The location object

Javascript Course

• Methods of the location object

The location object is part of the window object (but also of the document object), and provides access to the current URL and its components. It can be accessed through the window.location property (or document.location).

• window.location (or document.location ) returns the full URL address. But if you assign it a value (a string with a URL address) will load the page from that URL (makes redirect to that address).

document.write('<p>Current address:<br>'+window.location+'<br><br>- After 5 seconds redirects to: //gamv.eu</p>');
window.setTimeout(()=>{window.location ='//gamv.eu';}, 5000);

Properties of the location object

• hash - returns the part of the URL that follows the symbol '#', including the symbol: #str; or sets a 'hash' in URL.

  //URL: https://coursesweb.net/javascript?id=9#abc_xy
  var hash = window.location.hash; // #abc_xy
  
  //sets another hash
  window.location.hash ='xy_890';
  
  alert(hash);
  

• host - contains the domain name and port (if specified): coursesweb.net:8080

  //URL: https://bfie.marplo.net/page1
  var str = window.location.host; // bfie.marplo.net
  

• hostname - contains the domain name: coursesweb.net.

  //URL: https://coursesweb.net/javascript?id=9#abc_xy
  var str = window.location.hostname; // coursesweb.net
  

• href - sets or returns the entire URL.

  <p>Example: location.href<br>
   - Click the button to display an alert dialog box with the address of the page, then it loads another address (in iframe if the script is into an &lt;iframe&gt;).</p>
   <button id='btn1'>Click</button>
  
  <script>
  document.getElementById('btn1').addEventListener('click', (ev)=>{
   var str = window.location.href;
   alert(str);
  
   //loads other URL
   window.location.href ='//gamv.eu/';
  });
  </script>
  

• origin - returns the protocol, hostname and port number of a URL.

  <p>Example: location.origin<br>
   - <strong>window.location.origin</strong> returned:<br>
   <span id='resp'>window.location.origin</span></p>
  
  <script>
  document.getElementById('resp').innerHTML = window.location.origin;
  </script>
  

• pathname - returns or sets the string after the host and before the search (?), including the leading slash (/).

  //URL: https://marplo.net/html/div_span.html
  var str = window.location.pathname; // /html/div_span.html
  alert(str);
  
  //loads another page from current domain
  window.location.pathname ='/javascript/sintaxajs.html';
  

• port - returns or sets the port number.

  //URL: https://coursesweb.net:443/javascript
  var port = window.location.pathname; // 443
  

• protocol - sets or returns the string before the host (including the ':'), not including the slashes (//).

  //URL: https://coursesweb.net/javascript
  var prot = window.location.protocol; // https:
  

• search - returns or sets the part of the URL that follows the ? symbol, including the ? symbol.

  //URL: //https://domain.net/page?id=2&src=abcd
  var query = window.location.search; // ?id=2&src=abcd
  

Methods of the location object

• assign(url) - loads a new document.

  <p>Example window.location.assign().<br>
   - Click on the button to load an image in this window (iframe).</p>
   <button id='btn1'>Click</button>
  
  <script>
  document.getElementById('btn1').addEventListener('click', (ev)=>{
   window.location.assign('//coursesweb.net/imgs/smile_gift.png');
  });
  </script>
  

• reload(arg) - reloads the current document. The 'arg' argument is optional, and can be true or false.
  If is 'true', reloads the content from server; if is 'false' or is not specified, it can reload the document from the browser cache.

  <p>Example window.location.reload().<br>
   - If you click the button, it reloads the page from server.</p>
   <button id='btn1'>Click</button>
  
  <script>
  document.getElementById('btn1').addEventListener('click', (ev)=>{
   window.location.reload(true);
  });
  </script>
  

• replace(url) - replaces the current document with a new one.
  - The difference between this method and assign(), is that replace() removes the URL of the current document from the document history, meaning that it is not possible to use the "back" button to navigate back to the original document.

  <p>Example window.location.replace().<br>
   - If you click the button, it loads an image.</p>
   <button id='btn1'>Replace</button>
  
  <script>
  document.getElementById('btn1').addEventListener('click', (ev)=>{
   window.location.replace('//coursesweb.net/imgs/smile_gift.png');
  });
  </script>