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.

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

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy, objekty Příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.