home > tutoriale > javascript-ajax > ferestre-in-javascript.php
In acest tutorial va voi arata cum puteti deschide si inchide o fereastra cu JavaScript, este foarte simplu.
Introducem botoanele sau link-urile(eu am ales butoane) :
<html> <head> <title>Cum sa deschizi o noua fereastra</title> </head> <body> <input type="button" value="Deschide Fereastra" onclick="DeschideFereastra()" /> <input type="button" value="Inchide Fereastra" onclick="InchideFereastra()" /> </body> </html>
Aceaste functii trebuie scrise intre etichetele <head> si </head>
<head> <title>Cum sa deschizi o noua fereastra!!!</title> <script language="JavaScript"> //Script distribuit de www.rotuts.com . Tutoriale web-design , programare si multe altele. <!-- var fereastra = null; //facem functia deschide fereastra function DeschideFereastra() { //acum variabila "fereastra" nu mai este nula fereastra= window.open("","Galerie","width=300,height=400"); } //functia de inchidere function InchideFereastra() { //daca fereastra ESTE deschisa, atunci variabila "fereastra" nu este nula. if(fereastra != null) { //daca se afla ca variabila "fereastra" NU este nula, atunci inchidem fereastra fereastra.close(); fereastra=null; } } //--> </script> </head>
Ok, haideti sa explicam mai bine codul de mai sus :
Definim o functie cu numele DeschideFereastra, care foloseste metodul open pentru a deschide o noua fereastra.
Metodul open foloseste 3 parametrii :
Sintaxa:( window.open("URL","nume","[caracteristici]")
URL:
- indica documentul care se va incarca in noua fereastra , poate avea url-ul unei pagini din WWW.Poate fi absoluta sau relativa.
Nume:
- identifica noua fereastra
Caracteristici:
- se indica propietatile noii ferestre;daca trebuie sa apara bara de unelte, de directie, latimea si inaltimea, etc.
- toate caracteristicile trebuie scrise intre ghilimele dar fara spatii intre ele.
Dupa care, definim functia InchideFereastra , care o vom folosi pentru a inchide fereastra doar in cazul in care aceasta exista ( nu este inchisa )
Sa zicem ca dorim sa deschidem o fereastra care sa aiba inaltimea de 400,latimea de 400,bare de scroll, toolbar, menubar, location.
Atunci am avea codul de mai jos : ( lista cu toti parametrii la sfarsitul tutorialului ) .
<html> <head> <title>Ferestre in JS</title> <script type="text/javascript"> //ascundem de navigatoarele care nu suporta JS <!-- //stabilim variabila "fereastra" var fereastra = null; //facem functia Deschide function Deschide() { //in cazul in care functia Deschide este chemata, atunci variabila "fereastra" o sa stocheze fereastra. fereastra = window.open('rotuts.com','_blank','width=400,height=400,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes ,scrollbars=yes,resizable=yes'); //focalizam fereastra fereastra.focus(); } //functia Inchide function Inchide() { //daca variabila "fereastra" nu/difera este nula, atunci.... if(fereastra != null) { //inchidem fereastra fereastra.close(); //setam variabila la null fereastra=null; } } //--> </script> </head> <body> <input type="button" onclick="Deschide()" value="Deschide fereastra"/> <input type="button" onclick="Inchide()" value="Inchide fereastra"/> </body> </html>
Deasemenea putem sa scriem tot acest cod in linie, cand zic in linie ma refer la faptul ca putem scrie codul chiar in atributul onclick
Asa va arata codul :
<input type="button" onclick="fereastra=window.open('rotuts.com','','width=400,height=400,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes');" value="Deschide fereastra"/> <input type="button" onClick="fereastra.close();" value="Inchide fereastra"/>
Sintaxa : window.open(URL,name,caracteristici,replace) | |||||||||||||||||||||||||||
Parametrii | Descriere | ||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
URL | Optional,specifica URL-ul care o sa se deschida in acea fereastra.Daca nu este specificat o sa se deschida o pagina goala | ||||||||||||||||||||||||||
Name | Optional, specifica atributul sau numele ferestrei.Poate avea urmatoarele valori :
|
||||||||||||||||||||||||||
Caracteristici | Optional.Fiecare caracteristica trebuie separata cu o virgula si sa nu contina spatii intre ele.
|
Da si tu un like
Tweet
Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta
Comenturi
4 comenturi pana acum... (posteaza si tu)cau bau
Postat de Al. Cremaedia pe data de: Wednesday, 09.24.14 @ 09:19am
Salut Alin , super tutorial, cautam ceva asemanator si am dat peste acest tutorial , merci .
Postat de Paul pe data de: Thursday, 12.30.10 @ 09:16am
super tutorial , btw tabla nu este absolut completa am vazut pe w3schools ca are mai multe elemente.
Postat de Sebastian pe data de: Friday, 12.3.10 @ 15:01pm
chiar ceea ce cautam , multumesc !!!!
Postat de Adrian pe data de: Sunday, 10.17.10 @ 20:56pm