Obiectul location

Curs Javascript

Obiectul location apartine obiectului 'window' dar si obiectului 'document'.
- location contine date din adresa URL curenta.

• window.location (sau document.location ) returneaza adresa URL completa, dar daca i-se atribue o valoare (un sir cu adresa URL) va deschide in fereastra acea adresa (face redirect la adresa adaugata).

document.write('<p>Adresa curenta:<br>'+window.location+'<br><br>- Dupa 5 secunde redirect la: //gamv.eu</p>');
window.setTimeout(()=>{window.location ='//gamv.eu';}, 5000);

Proprietati obiect location

• hash - returneaza sau seteaza sirul din adresa URL care urmeaza dupa caracterul diez (#).

  //URL: https://marplo.net/javascript?id=9#abc_xy
  var hash = window.location.hash; // #abc_xy
  
  //adauga alt hash
  window.location.hash ='xy_890';
  
  alert(hash);
  

• host - contine numele domeniului si numarul de port (daca e specificat) al adresei URL.

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

• hostname - contine numele domeniului din adresa URL (fara port).

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

• href - seteaza sau returneaza adresa URL completa.

  <p>Exemplu: location.href<br>
   - La clic pe buton afiseaza fereastra alert cu adresa paginii, apoi incarca alta adresa (in iframe daca script-ul e intr-un &lt;iframe&gt;).</p>
   <button id='btn1'>Click</button>
  
  <script>
  document.getElementById('btn1').addEventListener('click', (ev)=>{
   var str = window.location.href;
   alert(str);
  
   //incarca alta adresa in fereastra
   window.location.href ='//gamv.eu/';
  });
  </script>
  

• origin - contine partea din adresa URL cu protocol, hostname (domeniu) si port (daca e specificat).

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

• pathname - returneaza sau seteaza partea din adresa URL dupa numele domeniului, cu '/' la inceput.

  //URL: https://marplo.net/html/div_span.html
  var str = window.location.pathname; // /html/div_span.html
  alert(str);
  
  //incarca alta pagina din aceleasi site
  window.location.pathname ='/javascript/sintaxajs.html';
  

• port - returneaza sau seteaza numarul port-ului din URL (daca e specificat).

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

• protocol - returneaza sau seteaza partea de protocol din adresa URL, cu ':' la sfarsit.

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

• search - returneaza sau seteaza sirul 'query' (parametri dupa '?') din adresa URL, inclusiv '?'.

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

Metode obiect location

• assign(url) - incarca si afiseaza documentul de la adresa 'url' transmisa.

  <p>Exemplu window.location.assign().<br>
   - La clic pe buton incarca o adresa cu o imagine.</p>
   <button id='btn1'>Click</button>
  
  <script>
  document.getElementById('btn1').addEventListener('click', (ev)=>{
   window.location.assign('//marplo.net/imgs/smile_gift.png');
  });
  </script>
  

• reload(arg) - reincarca adresa URL curenta in fereastra de browser. Parametrul 'arg' e optional, poate fi true sau false.
  Daca e specificat 'true', reincarca continutul de pe server; daca e 'false' sau nu e specificat, poate sa reincarce continutul din cache-ul browser-ului.

  <p>Exemplu window.location.reload().<br>
   - La clic pe buton reincarca pagina de pe server.</p>
   <button id='btn1'>Click</button>
  
  <script>
  document.getElementById('btn1').addEventListener('click', (ev)=>{
   window.location.reload(true);
  });
  </script>
  

• replace(url) - incarca si afiseaza in fereastra continutul de la adresa 'url'.
  - Diferenta fata de assign() e faptul ca replace() inlocuieste in 'history' pagina curenta cu pagina de la noua adresa, adica butonul Back din browser nu mai intoarce la pagina initiala.

  <p>Exemplu window.location.replace().<br>
   - La clic pe buton incarca o imagine.</p>
   <button id='btn1'>Replace</button>
  
  <script>
  document.getElementById('btn1').addEventListener('click', (ev)=>{
   window.location.replace('//marplo.net/imgs/smile_gift.png');
  });
  </script>