Otevírání nového okna

Někteří lidé namítají, že by webová stránka neměla nic otevírat do nového okna a nechat to na uživateli.

Ten si přece umí odkaz požadovaným způsobem otevřít sám. Cíl odkazu je ve většině prohlížečů zpravidla možné:

1. otevřít kliknutím kolečkem, stránka se otevře na pozadí,
2. otevřít rovněž na pozadí při přidržení klávesy Ctrl a prokliknutím,
3. otevřít do nové záložky přidržením klávesy Shift,
4. vybrat požadovaný způsob z kontextové nabídky.

Osobně se ale domnívám, že značná část návštěvníků toto nezná a v případech, kdy je nežádoucí přechodem na další stránku v podstatě zavřít tu původní, je otevření nového okna rozumné řešení. (Nechtěnému zavření může zabránit událost onbeforeunload a nebo alespoň minimalisovat následky dokáže ukládání formulářů do localStorage.)

Těm, co je nevyžádané otevírání nových tabů otravuje, doporučím alespoň zjednodušení v podobě zavírání záložek klikáním kolečkem – ve většině prohlížečů funguje.

HTML odkaz a target

První způsob otevření nového okna je obyčejný HTML odkaz doplněný o nastavení prázdného rámu:

<a href="http://example.com" target="_blank">
  Text odkazu
</a>

Pro otevření cíle odkazu do nového tabu se zpravidla používá hodnota _blank. (Mimochodem, je možné použít i nějaké nesmyslné jméno rámce, což také funguje.)

JavaScript a window.open

V JS se nové okno otevírá přes window.open.

window.open("url-stranky", '_blank');

Blokování vyskakovacích oken

Kvůli pohodlí uživatelů většina prohlížečů blokuje automatické otevírání nových oken, která se JavaScript snaží otevřít bez přímé akce uživatele. Jako přímé akce jsou vyhodnocovány některé události myši, např. onclick nebo onmousedown, tam prohlížeče ve výchozím nastavení nová okna neblokují.

Neznám způsob, jak u jiných událostí omezení obejít, nefunguje ani trik typu:

<button id="tlacitko" onclick="window.open('http://example.com')">
  Tlačítko
</button>
<script>
  document.getElementById("tlacitko").click();
</script>

Ukázka

Změna URL okna

Měnit URL zobrazenou v okně otevřeném skriptem je možné přes location.href (ukázka):

var okno = window.open();
okno.location.href = "http://example.com";

To se může hodit v situaci, kdy při potřebě otevřít nové okno ještě neznáme URL, která se teprve zjistí třeba AJAXem. Při přímé akci (kliknutí) se jen otevře prázdné okno a při nepřímé akci (získání dat AJAXem) se změní URL. To funguje bez blokování ze strany prohlížečů.

Zavření okna

Právě otevřené okno zavře prosté:

window.close()

V případě, že si na skriptem vytvořené okno vytvoříme odkaz (přiřadíme ho do proměnné dostupné z daného scope), můžeme zavřít i okno konkrétní:

var okno = window.open("url");
okno.close();

Rozšíření window.open

Kromě URL stránky a názvu okna/rámu existuje ještě třetí parametr, který umožňuje různá další nastavení, co fungují různě napříč prohlížeči, a je s jejich pomocí možné docílit různých nestandardních podob. A to moc nedoporučuji.