A böngészőablak szolgáltatásai

A korábbi fejezetekben először megismerkedhettünk a JavaScript nyelvvel, megnéztük, miben hasonlít a C++ vagy Java nyelvre, és milyen nyelvi tulajdonságokban különbözik, milyen lehetőségeink vannak az adataink reprezentálására, és az adatok feldolgozásáért felelős programozási tételek hogyan implementálhatók. A pusztán nyelvi felfedezést követően azt vizsgáltuk meg, hogy milyen módon vagyunk képesek JavaScriptből a HTML dokumentumbeli elemeket használni feladataink megoldásához. Láthattuk, hogy ehhez pár alap koncepció megértése a szükséges. Az egyik ilyen a Dokumentum Objektum Modell, a DOM volt, amely a HTML elemeknek megfelelő JavaScript objektumok hierarchiája, egy olyan programozói interfész, amelyen keresztül a dokumentum tetszőlegesen módosítható. A másik lényeges tudnivaló az eseményekhez és azok kezeléséhez kapcsolódott. Láthattuk, hogy a felhasználóval való kommunikáció alapvetően az elemeken kiváltott eseményeken keresztül valósul meg.

Noha a kliensoldali dinamikus webprogramozás elsődlegesen a HTML dokumentumra irányul, a JavaScript által elérhető és programozható objektumoknak azonban van még egy tágabb köre, mégpedig maga a böngészőablak, amelynek egyik részeként jelenik meg a dokumentum, ahogy azt az alábbi ábra is mutatja.

A böngészőablak az asztalon

Ebben a fejezetben azt vizsgáljuk meg, hogy JavaScriptből a böngészőablak mely tulajdonságait kérdezhetjük le és állíthatjuk be, és milyen érdekes vagy hasznos szolgáltatásokhoz juthatunk ezen keresztül.

A Böngésző Objektum Modell (BOM)

Ahogy a HTML elemeknek a DOM objektumok szolgáltatják a programozási felületét, úgy a böngészőablakhoz kapcsolódó szolgáltatásokat is egy-egy objektumon keresztül érhetjük el. Ezek az objektumok ugyancsak hierarchiába vannak rendezve, és ezt a hierarchiát hívjuk a böngésző objektum modelljének, röviden BOM-nak.

A BOM hierarchia csúcsán a window objektum áll. Ez eredetileg minden böngészőablakhoz külön létrejött, a füles böngészés elterjedésével azonban fülenként jön létre egy-egy window objektum. A BOM hierarchia viszonylag lapos, a böngészőablak nyújtotta szolgáltatásoknak megfelelő interfész objektumok ugyanis közvetlenül a window alá vannak becsatolva, annak egy-egy tulajdonságaként, ahogy az az alábbi ábrán is látható. Az ábrán jól látszik, hogy a BOM hierarchia pontosan tükrözi az ablak és a dokumentum viszonyát: ahogy a dokumentum az ablak részeként jelenik meg, úgy a DOM gyökerét képező document a window részeként érhető el.

A BOM hierarchiája

A BOM ugyan nem szabványos, de minden böngészőben hasonlóan implementálták. Eltérések vannak ugyan, de a főbb szolgáltatások megegyeznek.

Vissza a tartalomjegyzékhez

Globális névtér

Programozási szempontból érdekes lehet, hogy a window objektum biztosítja a globális névteret. Ez azt jelenti, hogy minden globális változó a window objektum egy tulajdonságaként jön létre. Ennek több következménye is van. Egyik az az, hogy egy globális változóra hivatkozáskor elé írhatjuk a window. hivatkozást, vagy másik oldalról megközelítve, a window. hivatkozás elhagyható. A másik következménye, hogy egy globális változóra hivatkozhatunk a window objektum kulcsaként.

//Globális változók hivatkozási formái
var megvalto = 'Jézus';
megvalto;               //"Jézus"
window.megvalto;        //"Jézus"
window['megvalto'];     //"Jézus"

Vissza a tartalomjegyzékhez

Méretek és pozíció

JavaScriptben számos érték lekérdezhető és beállítható a böngészőablak méretével és pozíciójával kapcsolatban. Nézzük először a lekérdezhető tulajdonságokat!

A window objektum az alábbi paramétereket teszi elérhetővé:

• innerHeight, innerWidth: a tartalmi rész (dokumentum) magassága és szélessége.
• outerHeight, outerWidth: a böngészőablak magassága és szélessége.
• screenX, screenY: az ablaknak a főképernyő bal felső sarkától való távolsága. Több monitoros elrendezés esetén a főképernyő az elrendezés bal felső sarkának megfelelő képernyő. Egyes böngészőkben screenLeft és screenTop néven is elérhető ez a tulajdonság.
• scrollX, scrollY: a tetejétől hány pixelnyire van lejjebb gördítve a dokumentum.

Annak lekérdezésére, hogy legfeljebb hány pixelnyit lehet a dokumentumot görgetni, Firefox böngészőben a scrollMaxX, scrollMaxY tulajdonságot kell használni. Vannak olyan böngészők, ahol nincs ilyen tulajdonság, ezeknél az alábbi módon lehet kiszámítani ezt az értéket:

document.documentElement.scrollHeight - document.documentElement.clientHeight

A böngészőablaknak helyet adó képernyőnek a paramétereit a window.screen objektumon keresztül lehet lekérdezni:

• width, height: a képernyő szélessége és magassága.
• availWidth, availHeight: a rendelkezésre álló szélesség és magasság a képernyőn. A tálca vagy egyéb elemek miatt ez az érték kisebb lehet, mint a width és height paraméterek.
• availTop, availLeft: egy monitor esetében ez a két érték általában 0. Több monitor esetén a legbaloldalibb monitortól való távolságát adja meg a képernyőnek. Például két monitoros elrendezés esetén a jobb oldali képernyőn elhelyezett böngészőben lekérdezve az értéket a bal oldali képernyő felbontását kapjuk az availLeft paraméterre.
• colorDepth, pixelDepth: a képernyő szín- és bitmélységét adja meg.

Az ablak helyzetét és méretét a window objektum metódusaival lehet beállítani:

• resizeTo(szél, mag): ablak átméretezése a megadott szélességre és magasságra. A modern böngészők már különböző megkötésekkel élnek az átméretezést illetően. Általában csak a főablakot nem engedik átméretezni, csak azt, amit már eleve JavaScripttel nyitottunk, valamint azoknak az ablakoknak az átméretezése is tiltott, amelyben egynél több oldal van megnyitva füleken. Ennek okai érthetőek: az egyik oldalbeli szkriptnek ne engedjük meg, hogy elrontsa a másik oldal méreteit, illetve hogy elállítsák a felhasználó által beállított böngészőméretet.
• resizeBy(dszél, dmag): ablak méretének megváltoztatása a paraméterben megadott értékekkel. Az átméretezésre ugyanolyan megkötések igazak, mint a resizeTo esetén.
• moveTo(x, y): az ablak mozgatása a paraméterként megadott pozícióra. A fenti megkötések itt is érvényesek.
• moveBy(dx, dy): az ablak pozíciójának megváltoztatása a paraméterként megadott értékekkel (ld. megkötések).
• scrollTo(x, y): a dokumentum görgetése a megadott pozícióra.
• scrollBy(dx, dy): a dokumentum görgetése a paraméterben megadott értékekkel.
• scrollByLines(l): a dokumentum görgetése paraméternyi sorral.
• scrollByPages(p): a dokumentum görgetése paraméternyi oldallal.

Az ablak méretéhez kapcsolódóan két eseményt kell kiemelnünk:

• resize: az ablak átméretezésekor hívódik meg.
• scroll: a dokumentum görgetésekor aktiválódik.

Vissza a tartalomjegyzékhez

Új ablak nyitása

Viszonylag gyakori igény, hogy információkat a meglévő oldal megtartása mellett jelenítsünk meg. Ennek egyik megoldásaként JavaScriptben lehetőségünk van új böngészőablakot nyitni a window objektum open metódusával, aminek általános szintaktikája a következő:

var w = window.open(url, név, tulajdonságok);

A paraméterek jelentése a következő:

• url: az új ablakba betöltendő tartalom URL-jét kell első paraméterként megadni. A tartalom bármi lehet, amit a böngésző támogat: HTML dokumentum, kép, stb. Ha ezt a paramétert üresen hagyjuk, akkor egy üres oldal jelenik meg a főablak beállításaival.
• név: az új ablak neve. Ha ez a név már létezik, akkor az url-ben megadott tartalom, a már létező ablakban jelenik meg. Ha a név nem létezik, akkor egy új ablak nyílik az adott névvel. Ha minden alkalommal új ablakot szeretnénk nyitni, akkor használjuk a _blank speciális nevet.
• tulajdonságok: ablaknyitási paraméterek egyetlen szövegként megadva. Ez a paraméter vesszővel elválasztott név=érték párokat tartalmaz, pl. "width=800,height=600,scrollbars=yes". Ha üres szöveget adunk meg, akkor az új ablak örökli a főablak tulajdonságait, és általában új fülként nyílik meg. Egyéb esetekben a nem megadott ablaknyitási paraméterek alapértelmezetten kikapcsoltak, és csak azok kerülnek beállításra, amelyeket expliciten megadunk.

Néhány fontosabb ablaknyitási paraméter a következő:

• top, left: az új ablak bal-felső sarkának pozíciója.
• width, height: az új ablak szélessége és magassága.
• menubar, toolbar, location, status: a menü, az eszköztár, az URL-t megadó mező és a státuszsor megjelenítését szabályozó paraméterek. Értékük yes vagy 1 a bekapcsoláshoz, no vagy 0 a kikapcsoláshoz.
• scrollbars: a gördítősáv megjelenését szabályozza. Értéke az előzőkkel egyezik meg. Az oldal használhatósága miatt érdemes mindig bekapcsolni.

A paraméterek pontos viselkedéséről és további paraméterekről a Mozilla dokumentációjában olvashatunk.

A window.open parancs használatát az alábbi példa szemlélteti:

//Az ELTE portáljának megnyitása új ablakban
var w = window.open(
    'http://www.elte.hu',
    'ELTEablak',
    'width=800,height=600,scrollbars=yes'
);

A window.open parancs visszatérési értékként egy hivatkozást ad meg az újonnan létrejött ablak window objektumára. A fenti példabeli w változó egy teljes értékű window objektum az adott ablakhoz tartozóan, és minden igaz rá, amit ebben a fejezetben a window objektumról írunk.

A szülő- és a gyerekablak kölcsönösen tud hivatkozni egymásra, és így egymás dokumentumaira is. A gyerekablakból a szülőablakot a gyerekablak window objektumának opener tulajdonságával lehet elérni (pl. w.opener a fenti példában). A gyerekablakot a window.open metódus által visszaadott objektumon keresztül érhetjük el. Amennyiben a megnyitáskori referenciát elveszítettük volna, akkor ezt úgyis megkaphatjuk, ha az url paramétert üresen hagyjuk, és csak az ablak nevét adjuk meg. Például:

var w = window.open('', 'ELTEablak');

Vissza a tartalomjegyzékhez

Az oldal URL-je

Az oldal aktuális URL-jéhez kapcsolódó információk és metódusok a window.location objektumon keresztül érhetők el. A betöltött oldalról az alábbi adatokat szerezhetjük meg:

• hash: az URL # utáni része.
• host: a hostname és protocol együttesen.
• hostname: a hosztnév.
• href: az egész URL.
• origin: a protocol és a host együtt.
• pathname: a host után megadott útvonal.
• port: portszám.
• protocol: az URL protokollja.
• search: a ? után megadott szövegrész.

A paramétereket működés közben az alábbi példa demonstrálja:

// URL: 
// http://webprogramozas.inf.elte.hu:8080/webfejl2.html?alma=piros#valami
 
var l = window.location;
l.hash;      //"#valami"
l.host;      //"webprogramozas.inf.elte.hu:8080"
l.hostname;  //"webprogramozas.inf.elte.hu"
l.href;      //az egész URL
l.origin;    //"http://webprogramozas.inf.elte.hu:8080"
l.pathname;  //"/webfejl2.html"
l.port;      //"8080"
l.protocol;  //"http:"
l.search;    //"?alma=piros"

A window.location objektumon keresztül nyílik lehetőség új oldal betöltésére JavaScript segítségével. Ennek egyik legegyszerűbb módja, ha az objektumnak értékül adjuk a betöltendő URL-t. De ugyanezt a feladatot hívatottak elősegíteni a window.location objektum metódusai is:

• assign(url): a paraméterül megadott URL betöltését végzi el.
• replace(url): ugyancsak a megadott URL betöltése a feladata, de úgy, hogy lecseréli az oldalt, így az előzmények között nem lesz új bejegyzés.
• reload(): újratölti az oldalt.

Vissza a tartalomjegyzékhez

Előzmények

A böngésző előző és következő gombjához tartozó funkcionalitást a window.history objektum biztosítja. A böngésző előzményeiben való navigálást három metódus segíti elő:

• back(): az előző oldalt tölti be.
• forward(): a következő oldalt tölti be.
• go(n): az aktuális oldaltól n távolságban lévő oldalt tölti be az előzmények közül. Ha n negatív, akkor hátrafelé lép, pozitív érték esetén előre.

//Előző oldalra lépés
window.history.back();
 
//A következő oldalra lépés
window.history.forward();
 
//A 3-mal ezelőtti oldal betöltése
window.history.go(-3);

Vissza a tartalomjegyzékhez

Keretek kezelése

Bár nem a legkorszerűbb honlapszerkesztési elvek szerint készültek, mind a mai napig találkozhatunk keretekből felépülő weboldalakkal. Ezeknél a keretekbe egy-egy HTML oldal töltődik be, és mindegyikhez külön window objektum tartozik. JavaScriptben a window.frames tömbszerű gyűjteményen keresztül érhetőek el az adott keretbe illeszkedő oldalak window objektumai. Az egyes ablakokra hivatkozás történhet számmal (pl. window.frames[0]) vagy az adott keret nevével (pl. window.frames['név']). Ezen kívül lehetőség van a kerethierarchiában közvetlen felette lévő ablak elérésére a window.parent segítségével, illetve a legfelső ablakra hivatkozást a window.top adja meg.

Példaképpen tekintsük a következő kerethierarchiát, ahol az egyes keretek neve megegyezik a fájlok nevével.

Példa kerethierarchia

Az egyes oldalak elérése a következőképpen tehető meg:

//A legfelső szinten két ablakot látunk
window.frames.length;                       //2
 
//A bal.html elérése
window.frames[0];                           //Window bal.html
window.frames['bal'];                       //Window bal.html
 
//A felso.html elérése
window.frames['bal'].frames['felso'];       //Window felso.html
 
//Felülről elérni a felso.html-t, majd innen a legtetejét
window.frames['bal'].frames['felso'].top;   //Window frame.html

Vissza a tartalomjegyzékhez

További window tulajdonságok

A window objektumnak számos további tulajdonsága érhető el. Ebből néhány fontosabb:

• name: az ablak nevét adja vissza.
• navigator: az ablakot megnyitó böngészőről ad vissza információkat. Jelentősége manapság csekély, ugyanis egyszerűen módosítható ez a szöveg. Különböző típusú böngészők támogatását nem ennek vizsgálatával kell megvalósítani.

A window objektum alá tartozó néhány fontosabb metódus:

• close: az ablak bezárása. Manapság általában csak a programozottan megnyitott ablakok csukhatók be.
• print: az adott oldal nyomtatása.

A window objektum által jelzett néhány fontosabb esemény:

• load, unload: az oldal betöltésekor, illetve elhagyásakor váltódik ki.
• abort: betöltés megszakításakor jelentkezik.
• close: oldal bezárásakor hívódik meg.

Vissza a tartalomjegyzékhez

Kidolgozott feladat

Példa

Megoldás

A fenti feladatban nincsen üzleti logika, itt elsősorban a felületi elemek megfelelő kezelése a lényeg. A feladat szerint a hivatkozásra kattintva kell új ablakot nyitnunk. Az már a korábbi fejezetekből kiderült, hogy nem tanácsos egyesével a hivatkozásokhoz rendelni az eseménykezelőt, egyrészt azért, mert nem mindegyiknek az elérése egyszerű (pl. nincs azonosítója), másrészt túl sok függvény létrehozásával és kezelésével jár. Érdemes egy közös ősön kezelni az eseményt, és delegálni a hivatkozás szintjére. De melyik elem legyen a közös ős? A feladat nem mond erre konkrét utalást, mint például egy lista, vagy egy div. Ebben az esetben érdemes a legfelső, dokumentumszinten kezelni az eseményeket.

//Eseménykezelők regisztrálása
function init() {
    document.addEventListener('click', ujablak, false);
}
window.addEventListener('load', init, false);

Az ujablak eseménykezelő függvényben először meg kell vizsgálni, hogy milyen elem jelezte először a kattintás eseményét. Ha ez hivatkozástól jött, akkor kiolvassuk a href attribútumát, és a window.open paranccsal új ablakot nyitunk 600x400-as méretben. Mivel nem szeretnénk, ha az eredeti oldalon is megjelenne a kattintott oldal, ezért az alapértelmezett műveletet letiltjuk az eseményobjektum preventDefault metódusával. Ezzel készen is vagyunk az a) feladatrésszel.

function ujablak(e) {
    if (e.target.tagName === 'A') {
        var a = e.target;
        e.preventDefault();
        var url = a.href;
        var WIDTH = 600;
        var HEIGHT = 400;
        window.open(
            url, 
            '_blank', 
            'width='+WIDTH+',height='+HEIGHT+',scrollbars=yes'
        );
    }
}

Következő lépésként a b) feladatban az ablak középre helyezése a cél. Ehhez nem kell mást tennünk, mint lekérdezni a böngészőt megjelenítő képernyő felbontását (window.screen.width és window.screen.height), valamint azt, hogy ennek a képernyőnek hol van a bal-felső sarka a főképernyőtől (window.screen.availTop és window.screen.availLeft). Az ablak szélességének és magasságának ismeretében már kiszámolható a bal-felső sarok pozíciója (top, left).

var top = window.screen.availTop + (window.screen.height - HEIGHT) / 2;
var left = window.screen.availLeft + (window.screen.width - WIDTH) / 2;

A c) feladat szerint csak bizonyos jelölésű linkeknél kell a fenti viselkedést biztosítani. A jelölést az elem a stílusosztályában hordja. Ehhez nem kell mást csinálni, mint lekérdezni a class attribútumát az elemnek, és ha ujablak, akkor elvégezni a fenti tevékenységeket. Így a végső eseménykezelő függvény a következőképpen néz ki:

function ujablak(e) {
    if (e.target.tagName === 'A') {
        var a = e.target;
        if (a.getAttribute('class') === 'ujablak') {
            e.preventDefault();
            var url = a.href;
            var WIDTH = 600;
            var HEIGHT = 400;
            var top = window.screen.availTop + (window.screen.height - HEIGHT) / 2;
            var left = window.screen.availLeft + (window.screen.width - WIDTH) / 2;
            window.open(
                url, 
                '_blank', 
                'width='+WIDTH+',height='+HEIGHT+',scrollbars=yes,top='+top+',left='+left
            );
        }
    }
}

Vissza a tartalomjegyzékhez

Feladatok

Vissza a tartalomjegyzékhez