MySQL Java JavaScript PHP Python HTML-CSS C-sharp

Deschiderea,închiderea și poziționarea ferestrelor

Limba JavaScript permite gestionarea programatică a ferestrelor browserului web. Pentru aceasta, obiectul window oferă o serie de metode. Astfel, metoda open() deschide un anumit resurs într-o nouă fereastră sau filă a browserului.

Trebuie să avem în vedere că o astfel de acțiune este preferabil să fie efectuată în urma unei acțiuni a utilizatorului, de exemplu, la apăsarea unui buton, deoarece în caz contrar browserele pot bloca astfel de ferestre. De exemplu, să definim următoarea pagină:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<button onclick="openWindow()">Click</button>
<script>
function openWindow(){
 window.open("https://microsoft.com");
}
</script>
</body>
</html>

Aici, pe pagina web este definit un buton - elementul button. Butonul are atributul onclick, care indică funcția JavaScript care va fi executată la apăsarea acestui buton.

În codul JavaScript este definită funcția openWindow(), care se execută la apăsarea butonului. În această funcție se execută funcția window.open(), în care ca prim parametru se transmite adresa - în acest caz "https://microsoft.com". Și la apăsarea butonului se va deschide într-o nouă filă pagina "https://microsoft.com".

Metoda open() acceptă mai mulți parametri:

open();
open(url);
open(url, target);
open(url, target, windowFeatures);

Ca prim parametru - url se transmite calea către resursă.

Al doilea parametru - target se transmite calea către resursă. Valorile comune:

  • _self: pagina se deschide în fila curentă
  • _blank: pagina se deschide într-o nouă filă sau într-o fereastră separată

De exemplu, deschiderea adresei în aceeași filă:

window.open("https://fdc.com", "_self");

Al treilea parametru permite să setezi un set de caracteristici stilistice ale ferestrei. Fiecare caracteristică stilistică este definită sub forma unor seturi name=value, unde name este numele caracteristicii stilistice, iar value este valoarea ei. Caracteristicile stilistice sunt separate între ele prin virgulă.

  • popup: specifică dacă pagina va fi deschisă într-o fereastră popup separată. Poate accepta valori precum yes, 1 sau true. De exemplu:
window.open("https://fdc.com", "_blank", "popup=yes");
  • width / innerWidth: lățimea ferestrei în pixeli. De exemplu, width=640
  • height / innerHeight: înălțimea ferestrei în pixeli. De exemplu, height=480
  • left / screenX: coordonata X relativă la începutul ecranului în pixeli. De exemplu, left=0
  • top / screenY: coordonata Y relativă la începutul ecranului în pixeli. De exemplu, top=0
  • location: specifică dacă va fi afișată bara de adrese. De exemplu, location=yes
  • menubar: specifică dacă va fi afișată bara de meniu. De exemplu, menubar=yes
  • scrollbars: specifică dacă fereastra va avea bare de derulare. De exemplu, scrollbars=yes
  • status: specifică dacă va fi afișată bara de stare. De exemplu, status=yes
  • toolbar: specifică dacă va fi afișată bara de unelte. De exemplu, toolbar=yes

Ultimii cinci parametri pot accepta valorile yes și no, pentru care se pot folosi și 1 și 0, respectiv.

Exemplu de utilizare a mai multor parametri:

window.open("https://fdc.com", "_blank", "width=600,height=400,left=500,top=200");

Merită de menționat că funcția returnează un link către fereastră, și cu ajutorul acestui link putem controla fereastra.

De asemenea, merită de menționat că prin proprietatea opener a ferestrei se poate obține un link către fereastra principală din care a fost deschisă fereastra curentă.

Închiderea ferestrei

Cu ajutorul metodei close() se poate închide fereastra. De exemplu:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<button onclick="openWindow()">Open</button>
<button onclick="closeWindow()">Close</button>
<script>
Let fdcWindow = null;

function openWindow(){
   if(!fdcWindow || fdcWindow.closed){  // dacă fereastra nu este deschisă
      fdcWindow = window.open("https://fdc.com", "_blank", "width=600,height=400,left=500,top=200,popup=yes");
  }
}
function closeWindow(){
   fdcWindow?.close(); // dacă fereastra este deschisă, atunci o închidem
  fdcWindow = null;
}
</script>
</body>
</html>

Aici sunt definite două butoane pentru deschiderea și închiderea ferestrei. Legătura cu fereastra propriu-zisă este plasată în variabila fdcWindow, care inițial este null. La apăsarea primului buton se apelează funcția openWindow().

În această funcție verificăm că fdcWindow nu este null și că fereastra nu este închisă (fdcWindow.closed nu este false). A doua verificare este necesară în cazul în care fereastra va fi închisă prin apăsarea pe x în fereastra însăși (în acest caz closed=true). Și dacă fereastra nu este deschisă, o deschidem.

La apăsarea celui de-al doilea buton apelăm metoda close a obiectului fdcWindow și setăm variabila la null.

Controlul poziției și dimensiunii ferestrei

Pentru controlul, modificarea poziției și dimensiunii ferestrei, obiectul window oferă o serie de metode:

  • moveBy(): mută fereastra browserului curent orizontal și vertical cu numărul specificat de pixeli. Primul parametru determină mutarea orizontală, al doilea parametru - mutarea verticală în pixeli
  • moveTo(): mută fereastra browserului curent orizontal și vertical în poziția specificată. Primul parametru determină poziția orizontală, al doilea parametru — poziția verticală în pixeli
  • resizeBy(): redimensionează fereastra browserului curent orizontal și vertical cu numărul specificat de pixeli. Primul parametru determină valoarea redimensionării orizontale, al doilea parametru — valoarea redimensionării verticale
  • resizeTo(): redimensionează fereastra browserului curent orizontal și vertical la dimensiunea specificată. Primul parametru determină lățimea, al doilea parametru — înălțimea
  • scroll(): derulează conținutul ferestrei la poziția specificată. Primul parametru indică poziția orizontală, al doilea parametru — poziția verticală
  • scrollBy(): derulează conținutul ferestrei cu factorul specificat. Primul parametru determină factorul de derulare orizontală, al doilea parametru determină factorul de derulare verticală
  • scrollTo(): derulează conținutul ferestrei la poziția specificată. Primul parametru indică poziția orizontală, al doilea parametru — poziția verticală

Exemple de control al poziției și dimensiunilor ferestrei:

// Mutăm fereastra browserului cu 200 de pixeli pe orizontală și 100 de pixeli pe verticală
window.moveBy(200, 100);
// Plasăm fereastra browserului în poziția cu coordonatele (200, 150)
window.moveTo(200, 150);
// Mărim fereastra browserului cu 200 de pixeli în lățime și 100 de pixeli în înălțime
window.resizeBy(200, 100);
// Micșorăm fereastra browserului cu 200 de pixeli în lățime și 100 de pixeli în înălțime
window.resizeBy(-200, -100);
// Derulăm conținutul ferestrei cu 100 de pixeli pe orizontală și 200 de pixeli pe verticală
window.scrollBy(100, 200);
// Derulăm conținutul browserului până la poziția (100, 200)
window.scrollTo(100, 200);

Este de menționat că la nivelul browserului pot exista restricții privind poziționarea și redimensionarea ferestrelor, în special dacă ferestrele încarcă resurse de pe domenii diferite.

De exemplu, cu ajutorul metodei moveTo() mutăm fereastra într-o nouă poziție:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<button onclick="openWindow()">Open</button>
<button onclick="moveWindow()">Move</button>
<script>
let testWindow = null;

// deschidem fereastra
function openWindow(){
   testWindow = window.open("test.html", "_blank", "width=600,height=400,left=200,top=200");
}
// mutăm fereastra
function moveWindow(){
   testWindow.moveTo(500,400);
}
</script>
</body>
</html>

În acest caz, la apăsarea butonului Open deschidem fereastra, iar la apăsarea butonului Move o mutăm în poziția cu coordonatele x=500, y=400 relative la colțul stâng superior al ecranului.

← Lecția anterioară Lecția următoare →