Nová karta prohlížeče

otevřená odkazem

Příklad - Techniky otevírání nového okna - Target v HTML - Javascriptem window.open() - Parametry, lišty, rozměry, umístění - Způsoby volání window.open() - Nové okno v editorech - Pro a proti novým oknům

Příklad

<a href="https://www.jakpsatweb.cz" target="_blank">Odkaz se otevře do nové karty prohlížeče</a>

Můžete zkusit: Odkaz se otevře do nové karty

Dříve byla okna, ne karty

V době vzniku tohoto textu ještě prohlížeče neměly karty (taby, panely, záložky, ouška, říkejte tomu, jak chcete). Proto v tomto textu píšu o oknech.

Techniky otevírání nového okna

Nové okno lze otevřít s využitím:

HTML -- starší a jistější způsob (použito v příkladu výše)
JavaScriptem -- většinou zbytečně komplikované, ale okno může mít různé vlastnosti a rozměry
uživatel si ho může otevřít sám (o tom nepíšu)

Target v HTML

Target znamená anglicky "cíl". Atribut target u odkazu znamená cílové okno nebo cílový rám.

target="_blank"

Při volání nového okna se používá zápis

<a href=".." target="_blank">text odkazu</a>

_blank je vyvolená hodnota, která znamená vždy nové okno. Při aktivaci takového odkazu se uživateli otevře nové okno, které:

nemá historii (nelze dát zpět)
má velikost naposledy otevřeného nového okna
má nástroje, lišty, menu a stavový řádek.

Je to prostě normální okno prohlížeče. Nenormální okno se dá udělat jenom javascriptem.

Jméno okna -- target="cokoliv"

Co se stane, když napíšu odkaz s libovolnou hodnotou target?

<a href=".." target="cokoliv" >text odkazu</a>

např. tedy konkrétněji:

<a href="http://www.jakpsatweb.cz" target="ahoj" >odkaz do okna ahoj</a>

Zkuste si: odkaz do okna ahoj

Po kliknutí se také otevře nové okno. Na první pohled všechno v pořádku. Jaký je tedy rozdíl mezi target="_blank" a target="cokoliv"?

Zatímco target="_blank" otevře vždycky nové okno,
target="cokoliv" nové okno otevře jenom poprvé. Dál už posílá odkazy do toho okna (dokud to okno uživatel nezavře, pak otevírá zase nové).

Při kliknutí na odkaz s target="ahoj" si prohlížeč zapamatuje, že nové okno se jmenuje "ahoj" a další odkazy posílá do něj. To se někdy hodí, ale ve většině případů je to na zlost. Takové pojmenované okno totiž zůstává v pozadí (nemusí být vidět) a při aktivaci druhého odkazu se nepřepne do popředí (nechytí focus). (Zkuste si podruhé kliknout na odkaz do okna ahoj.) Uživatel si toho vůbec nemusí všimnout a domnívá se, že se po kliknutí na odkaz nic nestalo.

To je důvod, proč pro nové okno vždycky doporučuji používat target="_blank", protože nové okno se nijak nejmenuje a vyskočí do popředí i napodruhé (protože se prostě udělá nové).

Všechny odkazy do nového okna

Dá se zařídit, aby se všechny odkazy na stránce otevíraly do nového okna. Do hlavičky HTML stránky se přidá zápis:

všechny odkazy na celé stránce se potom chovají tak, jako by měly target="_blank" a otevírají se tedy do nového okna.

Jak potom zařídit, aby se nějaký odkaz otevíral ve stejném okně? Do odkazu se napíše target="_self". Nijak jednodušeji to nejde.

Formulář do nového okna

Je to hodně podobné odkazům. Příklad:

Odeslaný formulář se prostě realizuje v novém okně.

Musím zmínit rámy

Target se používá na dvě věci:

otevírání nových oken (o tom teď píšu)
směrování odkazů v rámech (o tom tady nepíšu a pro nová okna to není důležité)

Javascriptem window.open()

Dost často můžete chtít, aby nové okno mělo přesné rozměry, nemělo lišty a takové ty blbosti, nebo aby se otevíralo přes celou obrazovku. Všechno to umí javascriptová metoda window.open(). Tuto metodu si prostudujte, pokud tomu chcete rozumět pořádně. Následující text se mi docela zkomplikoval, problematika si to vyžaduje. Kdyžtak to přeskočte.

Příklady

Nejjednodušší možný příklad otevře nové okno se stránkou index.html podobně jako target="_blank":

<a href="index.html" onclick="window.open('index.html'); return false">odkaz do nového okna javascriptem</a>

Zápis je to poněkud komplikovanější. Může být ale ještě hůř:

otevře nové okno bez lišt a nástrojů. Okno bude mít horní hranu 10 pixelů od horního okraje obrazovky, nepůjde roztáhnout a rolovat. Schválně: okno bez lišt

Parametry -- lišty, rozměry, umístění

Novému oknu otevřenému javascriptem se dá předepsat spousta věcí (naopak novému oknu od target="_blank" nejde předepsat vůbec nic). Přehled a další příklady jsou uvedeny u syntaxe window.open(). Například lze vypnout a zapnout panel nástrojů (toolbar), řádek adresy (location), stavový řádek (status), menu (menubar). Oknu se může povolit rolování (scrollbars) a změna velikosti (resizable). Okno může mít nastaveny pevné rozměry (width, height) a může být na obrazovce na přesné pozici (left, top). Okno se může zobrazit přes celou obrazovku (fullscreen).

Pokud se hodnoty neuvedou, jsou chápány negativně (co se neuvede, to se nezobrazí).

Vždycky to okno bude mít titulkový proužek (většinou modrý), ten se nedá vypnout. (V novém SP na XP nejde vypnout ani stavový řádek.)

Příklady:

window.open('banner.html','_blank','width=468,height=60,top=0,left=0')

zobrazí banner.html v okně velkém 468x60 u horního levého kraje obrazovky

window.open('special.html','_blank','width=500,height=400,location,resizable')

otevře okno se stránkou special.htm o velikosti 500x400. Pozice na obrazovce není definována. Je vidět adresa stránky. Oknu se dá zvětšit velikost (resizable), ale nelze jím rolovat (protože chybí scrollbars).

Dá se to obejít

Uvědomte si, že třeba stisknutím Ctrl + N si může uživatel zapnout tutéž stránku v dalším novém normálním okně, které je větší, s menu, se zobrazenou adresou atd. (Mimochodem já to tak dělám skoro vždy.) Nikdy si tedy nemyslete, že parametry okna mohou působit jako nějaká překážka. Prostě se to dá obejít.

Varuji před fullscreenem

Hodně amatérů rádo otevírá nové okno přes celou obrazovku. Dělá se to parametrem fullscreen, např:

<a href="https://www.jakpsatweb.cz/" onclick="window.open('https://www.jakpsatweb.cz/','','fullscreen'); return false">Jak psát web přes celou obrazovku</a>

To okno se (na Windows) dá shodit pouze Alt + F4. Zkuste si to: Jak psát web přes celou obrazovku. Nikdy to nepoužívejte, je to prasárna největšího kalibru. Co myslíte, že si uživatel myslí, když se mu něco takhle otevře:

"Jé, to je ale krásná stránka, to si počtu!"
nebo "Fuj, co se to stalo! Jak se odsud dá sakra vyskočit?"

Způsoby volání window.open()

automaticky popup (prasárna)
href="javascript: window.open() -- taky prasárna
onclick="window.open(); return false"

Pop-up při načítání stránky

Automatické vyskočení nového okna při načítání stránky (popup). Nové okno vyskočí, i když se nestiskne žádný odkaz. Dělá se to třeba zařazením skriptu do toku dokumentu:

Vizte příklad a teorii pop-upu. Všichni uživatelé, co znám, taková okna automaticky zavírají myší, ještě než se v okně něco zobrazí. Moderní prohlížeče a různé doinstalované nástroje (např. Google toolbar) umějí automatickému otevírání nových oken zabránit.

href="javascript:window.open()"

Umisťovat do href zápis javascript:něco je obecně vzato chyba.

vyhledávače (Google) se takovým odkazem neprokoušou
pokud si někdo odkaz otevře do nového okna ručně, vidí prázdnou stránku. Stává se mi to často a nadávám přitom.

No ale kdybyste to někdy potřebovali, funguje to takhle:

<a href="javascript: window.open('http://www.jakpsatweb.cz','','')">nespolehlivý odkaz do nového okna</a>

Využití události onclick

V zásadě se jedná o jediný přijatelný způsob, jak javascriptem + odkazem otevírat nová okna. Zápis je:

<a href="adresa.html" onclick="window.open('adresa.html','',''); return false">odkaz</a>

Proč je tam to href="adresa.html"? Zdá se totiž, že je to zbytečné. Není. Je to tam kvůli klientům, kteří nepodporují javascript (zejm. Google robot).

Pokud je adresa dlouhá, dá se to napsat stručněji pomocí vlastnosti this.href, která má hodnotu hrefu odkazu:

<a href="dlouha_adresa.html" onclick="window.open(this.href,'',''); return false">odkaz</a>

Proč je tam to return false? Aby odkaz neprokliknul a v původním okně aby zůstala původní stránka. Ještě lepší je to napsat takhle:

<a href="adresa.html" onclick="return !window.open(this.href,'','');">odkaz</a>

Je to kvůli blokovačům nových oken. Kdyby se nové okno náhodou zablokovalo, tak to proklikne aspoň do normálního okna.

Zavírání okna odkazem

Okno, které jsem javascriptem otevřel, můžu i javascriptem zavřít. Například do té stránky můžu dát odkaz:

<a href="#cokoliv" onclick="window.close()">zavřít okno</a>

Ne každé okno jde samo zavřít. Většina oken prohlížeče před zavřením javascriptem zobrazí výstražnou hlášku:

"Webová stránka, kterou prohlížíte, se pokouší zavřít okno. Má se okno zavřít? Ano Ne"

Jde pravděpodobně o bezpečnostní opatření prohlížečů.

Proč o tom píšu -- hodně lidí se snaží udělat stránku, která:

po načtení otevře nové okno daných vlastností (většinou bez lišt nebo přes celou obrazovku)
a pak zavře původní okno, "aby tam nerušilo"

Takže tohle pokud vím udělat nejde, protože se to původní okno při zavírání začne cukat. A jestli chcete znát můj názor, tak si myslím, že je dobře, že to nejde.

Nové okno v editorech

Pokud se nechcete nořit do HTML a používáte nějaký wysiwyg editor, většinou na otevření nového okna stačí:

zvolit vlastnosti odkazu (dialog, kde se nastavuje, kam ten odkaz vede)
hledat něco jako "cílové okno", "cílový rám", "target", target frame", "target window"
a zvolit tam hodnotu "nové okno", "new window" nebo "_blank"

Pro a proti novým oknům

Proti

Uživatele to zmate.

Umějí to stejně sami.

Pro

Občas je nějaká informace pouze doplňková.

V galeriích, kde se obrázky načítají dlouho, má nové okno smysl. Stejně tak v nějakých složitějších aplikacích, kde je potřeba neopustit stránku (třeba protože je formulář zpola vyplněný).

Závěr

Takže nové okno používat pouze výjimečně. Kdo z této stránky nic nepoužije, vyhrál.

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně