Otevření nového okna
Příkaz window.open()
Příklad - Syntaxe - Využití - Blokování nových oken - Nové okno v HTML
Tento návod byl psán před vydáním Service Packu 2, který v otevírání nových oken obsahuje nová bezpečnostní omezení. Na Windows XP s SP2 vám nemusí některé příklady fungovat. Tip: co vám z bezpečnostních důvodů nefunguje na disku, to může fungovat na webu.
Příklad:
window.open("http://www.jakpsatweb.cz", "_blank", "width=400,height=500")
otevře zadanou stránku v novém okně, které nebude mít žádné lišty nebo panely, přičemž bude mít velikost 400 x 500 a nepůjde roztáhnout.
Jiný příklad:
window.open("index.html", "nove", "width=800,height=600,menubar=yes,resizable=yes,left=0,top=0")
otevře velké nové okno (800x600), které bude přilepené do levého horního růžku obrazovky (left=0, top=0). V okně bude načtena hlavní stránka (index) ze stejného adresáře. Okno se jmenuje "nove", což se dá použít pro případné odkazy (target="nove").
Syntaxe:
window.open("URL", "jmeno_okna", "volba=hodnota,volba2=hodnota2")
Při zápisu pozor na čárky a uvozovky -- uvozovky jsou tam potřeba (mohou se nahradit apostrofy).
URL (tedy první parametr) se zadává normálně s absolutní adresou http://..., nebo s relativní adresou odvozenou od aktuálního dokumentu.
Jméno okna (druhý parametr)
Jméno okna se dá později použít pro zacílení případných odkazů pomocí target nebo přeplácnutí obsahu tohoto okna jiným skriptem.
Jestliže se jako hodnota tohoto druhého parametru použije "_blank" nebo prázdný řetězec, prohlížeč to pochopí jako nové nepojmenované okno. Je to tedy to, co je v html target="_blank". Pokud druhý parametr chybí (když má metoda jenom jeden), potom se jméno okna pochopí také jako "_blank", tedy nepojmenované okno.
Na webech, které používají otevírání nových oken, je často vidět jiná chyba, totiž pojmenování nového okna u všech odkazů stejně. Když si uživatel náhodou do nového okna otevře už dva odkazy (protože ho zajímají oba), tak mu obsah toho prvního odkazu bude přeplácnut tím druhým. (Například na idos.cz v nové verzi z roku 2008.) V takových situacích je od autora webu lepší, když jméno toho okna vůbec nezadává.
Volby (třetí parametr)
Volby jsou nepovinné. Oddělují se čárkou bez mezery (!) a týkají se většinou zobrazení různých částí okna:
| Volba | Význam | Hodnoty |
|---|---|---|
| toolbar | panel nástrojů (zpět, vpřed...) | yes | no |
| location | vstupní pole adresy | yes | no |
| directories | divný panel odkazů | yes | no |
| status | stavový řádek (dole), ve WIN XP SP2 nelze zruršit | yes | no |
| menubar | nabídka (soubor, úpravy...) | yes | no |
| scrollbars | rolovací lišty (umožňující posun) | yes | no |
| resizable | možnost změny velikosti okna uživatelem | yes | no |
| width | šířka okna v pixelech | pixely |
| height | délka okna v pixelech | pixely |
| left | vzdálenost levého okraje od okraje obrazovky | pixely |
| top | vzdálenost horního okraje od vršku obrazovky | pixely |
| fullscreen | okno bude přes celou obrazovku (fakt přes celou) | bez hodnoty |
Namísto yes | no lze zadávat hodnoty 1 | 0. Pokud se uvede volba bez hodnoty, chápe se jako yes, pokud se volba neobjeví, chápe se jako no.
Pokud nejsou hodnoty uvedeny
Z toho vyplývají i hodnoty voleb, pokud nejsou uvedeny.
- Všechny volby jsou rovny yes, pokud se volby vůbec nezadávají (tzn. příkaz nemá třetí parametr).
- Pokud se ale volby zadávají (třeba i řetězcem ""), všechny neuvedené jsou rovny no.
Příklad:
window.open("http://www.seznam.cz", "seznam_ram", "location=yes,status=no,width=600,height=500,resizable")
otevře nové okno 600 x 500 se Seznamem, bude vidět adresa, nebude zobrazena stavová lišta a okno bude rozšiřitelné. Po obsahu ale nepůjde rolovat, protože není uvedena volba scrollbars.
Neuvedou-li se rozměry okna, velikost je stejná jako u nových oken (otevřených příkazem Otevřít v novém okně).
Příklad: window.open("http://www.google.com") zobrazí
Google v novém
okně, které bude úplně normálním oknem prohlížeče (protože volby nejsou
vůbec vypisované, a tak jsou chápány jako yes).
Pokud se použije zápis nove_okno = window.open(...), dá se potom
s oknem manipulovat s použitím proměnné nove_okno (to jen pro vyspělé
skriptovače).
Co nejde
Titulkový proužek, většinou modrý proužek nahoře, se zobrazí vždy a nelze jej nijak vypnout.
Nelze udělat nové okno maximalizované (pouze co největší).
Skriptem nejde změnit velikosti okna, pouze jde otevřít nové.
Nelze automaticky zavřít to okno, které okno otevřelo.
Nejčastější chyba
Spočítejte si dobře parametry příkazu window.open. Jsou tři. Když tam
napíšete 4 nebo víc, nebude to fungovat. Např. symbolicky window.open("adresa","ram","parametry","jiné
parametry"), tak je to špatně, protože správně to má být
window.open("adresa","ram","parametry , jiné
parametry"). Pokud se uvede jenom jeden parametr, je to adresa
stránky. Druhý je jméno rámu. Třetí jsou vlastnosti okna. Když je pomícháte,
nebude to fungovat.
Využití
Osobně mám příkaz window.open nerad, ale chápu, že jej někteří autoři potřebují. Nejčastěji se otevření nového okna váže k nějakému odkazu <a> a události kliknutí onclick.
<a href="stranka.html" onclick="window.open('stranka.html'); return false">
Odkaz normálně míří na stránku stranka.html, ale při kliknutí se stranka.html
otevře v novém malém okně. Protože by se normálně stránka načetla i do
aktuálního okna (což dejme tomu nechceme, proč ji totiž zobrazovat
dvakrát?), je třeba k onclick doplnit o return false,
což způsobí, že se vlastní odkaz nespustí (jako bychom nakonec řekli:
kliknuto = nebylo).
Jde to napsat ještě úsporněji, aby se tam nemusela psát dvakrát ta adresa stránky:
<a href="stranka.html" onclick="window.open(this.href); return false">
Dost často se otevírání nového okna používá na nějakou stránku s doplňujícími událostmi nebo pro zobrazení reklamy.
Příkaz otevření nového okna lze navázat na libovolnou událost libovolného prvku. (Kdysi dávno šlo události používat jenom u odkazů (odesílacích tlačítek a několika málo dalších elementů), protože starší prohlížeče u jiných elementů neuměly události spouštět. To dnes už dávno neplatí.)
Proto se častěji otevírání nového okna zapisuje jako skript přímo do proudu dokumentu
<script>
window.open(...);
</script>
nebo se váže na událost onload prvku body (načtení dokumentu):
<body onload="window.open(...)">
Reklamní pop-up
Otevření nového okna s reklamou se říká pop-up. Je to jeden z nejnenáviděnějších reklamních formátů. Dejme tomu, že do budu načítat stránku reklama.html ze serveru reklama.net.
<script>
window.open("http://www.reklama.net/reklama.html", "_blank",
"width=250,height=250");
</script>
To je jaksi celé. Při natahování stránky vyskočí pop-up okénko samo o sobě (protože je voláno přímo ze <script>), která má standardní rozměry pop-up reklamy 250x250. Mimochodem, jedná se o nejméně účinný typ reklamy, protože takové okénko hned všichni zavírají.
Příklad s metodou window.open vizte např. u metod focus() a blur()
Blokování nových oken
Existuje hodně blokovačů nových oken -- prográmků, co se dají doinstalovat do prohlížeče. Pokud mám takový prográmek nainstalovaný, odchytává to každé samovolně otevírané nové okno. Prográmky se liší tím, že na zablokované okno buďto upozorní, nebo neupozorní vůbec. Může se tak stát, že nové okno, které budete na svých stránkách plánovat, se vůbec neotevře. Neznám žádný výzkum rozšíření blokovačů nových oken, ale troufám si tvrdit, že jejich výskyt časem jenom poroste. A tak tu máme další argument proti používání nových oken javascriptem. Nejrozšířenějším blokovačem je lištička Google toolbar (určená primárně pro účely vyhledávání).
Vezmu-li v úvahu existující blokovače, je nejlepší předchozí příklad ještě trochu přepsat:
<a href="stranka.html" onclick="return !window.open(this.href);">
Podstatný fígl je v tom, že když na to někdo klikne a okno se zablokuje, tak metoda window.open frátí false. Ten vykřičník to zneguje a je z toho true -- takže odkaz normálně proklikne.
Záložky v prohlížeči
Záloží na nastavení prohlížeče, zda se nové okno náhodou neobjeví jako nová záložka. Ve většině moderních prohlížečů (2008: tedy IE7, Firefox 2 a Opera 9) se volání window.open přepíná do nové záložky a nové okno se vytváří jenom v tom případě, kdy má nastavené rozměry.
Nové okno normálně v HTML
Pro doplnění příklad na otevření nového okna po kliknutí na odkaz:
<a href="adresa.html" target="_blank">odkaz</a>
Vzhled ani velikost takového okna nejde nijak ovlivnit. Vizte target v HTML.
Reklama
