A JavaScript Window egy globális interfész (objektumtípus), amely a böngészőablak életciklusának vezérlésére és különböző műveletek végrehajtására szolgál.
A JavaScript kódunkban rendelkezésre áll egy globális változó window, amely az aktuális böngészőablakot jelképezi, amelyben a kód fut, és közvetlenül elérhető a window literál használatával.
Ez egy weboldalt tartalmazó ablakot jelképez, amelyet viszont a document objektum képvisel. Az ablak lehet új ablak, új lap, keretkészlet vagy JavaScript segítségével létrehozott egyedi keret.
A több lapos böngésző esetén az ablakobjektum egyetlen lapot reprezentál, de egyes tulajdonságai, mint a innerHeight, innerWidth és metódusai, mint a resizeTo() az egész böngészőablakot érintik.
Amikor új ablakot vagy lapot nyitunk, automatikusan létrejön az adott ablakot/lapot reprezentáló ablakobjektum.
Az ablakobjektum tulajdonságait az éppen megnyitott ablakra vonatkozó információk lekérdezésére használjuk, míg a metódusait olyan speciális feladatok elvégzésére, mint az ablak megnyitása, maximalizálása, minimalizálása stb.
Az ablakobjektum megértéséhez használjuk azt néhány művelet elvégzésére, és nézzük meg, hogyan működik.
A JavaScript ablakobjektum használata
Használjuk a JavaScript ablakobjektumot egy új ablak létrehozására, a open() metódus segítségével. Ez a metódus létrehoz egy új ablakot, és visszaad egy objektumot, amelyet a továbbiakban az ablak kezelésére használhatunk.
A fenti kódban a meglévő ablak ablakobjektumát használtuk egy új ablak létrehozásához a open() metódus segítségével. A open() metódusban megadhatjuk az új ablakban megnyitandó URL-t (üresen is hagyhatjuk), az ablak nevét, a létrehozandó ablak szélességét és magasságát.
A következő az ablakobjektum open() metódusának szintaxisa:
let newWindow = window.open(url, windowName, );Az új ablak létrehozása során annyi tulajdonságot adhatunk meg, amennyit csak akarunk.
A open() metódus végrehajtása után visszaadja az újonnan létrehozott ablak objektumának referenciáját, amelyet hozzárendelhetünk egy változóhoz, ahogy a fenti kódban is tettük. A window.open() metódus által visszaadott értéket a win változóhoz rendeltük.
A win változót az új ablak elérésére használtuk, például az ablak nevének lekérdezésére, az új ablakot megnyitó ablak helyének lekérdezésére stb.
A window objektumnak számos tulajdonsága és metódusa van, amelyeket az alábbiakban felsoroltunk.
Find Dimensions of a Window
A window objektum beépített tulajdonságainak használatával megtudhatjuk az ablak magasságát és szélességét.
A window objektummal(window.document) elérhetjük a dokumentum objektumot is, ami hozzáférést biztosít a HTML dokumentumhoz, így új HTML elemet adhatunk hozzá, vagy bármilyen tartalmat írhatunk a dokumentumba, ahogy a fenti példában is tettük.
JavaScript Window Object Properties
A wondow objektum tulajdonságai a windows objektumon belül létrehozott változókra utalnak.
A JavaScriptben az összes rendelkezésre álló adatot tulajdonságként csatoljuk az window objektumhoz.
A window objektum tulajdonságaihoz hozzáférhetünk, mint például: window.propertyname ahol a tulajdonságnév a tulajdonság neve.
Az alábbi táblázat a legnépszerűbb ablakobjektum-tulajdonságokat tartalmazza:
| Property | Description |
|---|---|
| closed | visszaad egy boolean értéket, amely megadja, hogy az ablak be van-e zárva vagy sem |
| document | meghatározza az ablakban lévő dokumentumobjektumot. |
| history | meghatározza az ablak előzményobjektumát. |
| frames | megadja az aktuális ablak összes keretének tömbjét |
| defaultStatus | megadja az ablak állapotsorában megjelenítendő alapértelmezett üzenetet. |
| innerHeight | megadja az ablak tartalmi területének belső magasságát. |
| innerWidth | megadja az ablak tartalmi területének belső szélességét. |
| length | megadja az ablakban található keretek számát. |
| location | megadja az ablak helyobjektumát |
| name | megadja az ablak nevét |
| top | megadja a böngésző legfelső ablakának hivatkozását. |
| self | visszaadja az aktuális aktív keret vagy ablak hivatkozását. |
| parent | visszaadja az aktuális ablak szülő keretét vagy ablakát. |
| status | megadja az ablak állapotsorában megjelenő üzenetet, amikor az ablakon tevékenységet végeznek. |
| screenleft | megadja az ablak x koordinátáját a felhasználó monitor képernyőjéhez képest |
| screenTop | megadja az ablak y koordinátáját a felhasználó monitor képernyőjéhez képest |
| screenX | meghatározza az ablak x koordinátáját a felhasználó monitor képernyőjéhez viszonyítva |
| screenY | meghatározza az ablak y koordinátáját a felhasználó monitor képernyőjéhez viszonyítva |
Mutatunk egy példát, hogy megnézzük néhány ilyen tulajdonságot működés közben:
A fenti példában egy új ablakot hoztunk létre, csak azért, hogy megismerkedjünk az új ablakok létrehozásával, és azért is, hogy megértsük, hogy amikor új ablakot hozunk létre, akkor az aktuális ablaknak egy másik ablakobjektuma van, az új ablaknak pedig egy külön ablakobjektuma lesz.
Ezután megpróbáltuk elérni a létrehozott új ablak néhány tulajdonságát.
FELADAT: Próbáljunk ki még néhány ablak tulajdonságot a fenti kód játszótéren, hogy gyakoroljuk és megértsük az ablak tulajdonságainak működését.
JavaScript Window Object Methods
Az ablakobjektum metódusai az ablakobjektumon belül létrehozott függvényekre utalnak, amelyek segítségével különböző műveleteket végezhetünk a böngészőablakon, például hogyan jelenít meg egy üzenetet, vagy hogyan kap bevitelt a felhasználótól.
A következőkben felsoroltunk néhányat a leggyakrabban használt ablakobjektum-módszerek közül:
| Módszer | Megnevezés |
|---|---|
alert() |
meghatároz egy módszert, amely megjelenít egy figyelmeztető dobozt egy üzenettel egy OK gombot. |
blur() |
meghatároz egy módszert, amely eltávolítja a fókuszt az aktuális ablakból. |
clearInterval() |
meghatároz egy módszert, amely törli a setInterval() módszerrel beállított időzítőt. |
close() |
meghatároz egy olyan metódust, amely bezárja az aktuális ablakot. |
confirm() |
meghatároz egy olyan metódust, amely megjelenít egy párbeszédpanelt egy üzenettel és két gombot OK és Cancel |
focus() |
meghatároz egy olyan metódust, amely beállítja a fókuszt az aktuális ablakon. |
open() |
meghatároz egy módszert, amely megnyit egy új böngészőablakot |
moveTo() |
meghatároz egy módszert, amely egy ablakot egy megadott pozícióba mozgat |
moveBy() |
meghatároz egy módszert, amely egy ablakot az aktuális pozícióhoz képest mozgat. |
prompt() |
meghatároz egy olyan metódust, amely inputot kér. |
print() |
meghatároz egy olyan metódust, amely nyomtatási parancsot küld az aktuális ablak tartalmának kinyomtatására. |
setTimeout() |
meghatároz egy olyan módszert, amely egy kifejezést egy megadott számú milliszekundum után kiértékel. |
setInterval() |
meghatároz egy olyan módszert, amely egy kifejezést meghatározott időközönként (milliszekundumban) |
resizeBy() |
megadja azt az összeget, amellyel az ablak mérete átméreteződik |
resizeTo() |
az ablak dinamikus átméretezéséhez |
scroll() |
gördíti az ablakot a dokumentum egy adott helyére |
scrollBy() |
gördíti az ablakot a megadott értékkel |
stop() |
ez a módszer leállítja az ablak betöltését |
Mutatunk egy példát, és megnézzük a fenti módszerek közül néhányat működés közben:
A fenti példában néhány ablakmetódust használtunk, több módszert is kipróbálhatunk. A következő bemutatóban megismerkedünk a History objektummal, amely az ablak objektum egyik tulajdonsága.