Upozornění před zavřením stránky v MSIE JavaScriptem

7. ledna 2004

•

V některých aplikacích je skutečně dobré upozornit uživatele před zavřením stránky, ať už jde o možnost ztráty neuložených údajů, neodhlášení se ze systému nebo třeba neukončení účtování používání služby.

Jediným prohlížečem, který umožňuje uživatele před zavřením okna nebo odchodem z nějaké stránky varovat, je bohužel pouze Internet Explorer od verze 4+. To však nikterak nebrání použití dále popsané metody, uživatelé jiných prohlížečů prostě varováni nebudou a pokud si nebudou ochotni přečíst podmínky provozu naší služby, budou si muset neuložené údaje zadat znovu, nebo si prostě zaplatí víc za čas, kdy službu sice již nepoužívali, ale protože se neodhlásili, určitá částka do vypršení timeoutu jim byla dále účtována. Prohlédněte si ukázku (zdrojový kód), ve které můžete přecházet mezi stránkami 1 a 2. V okamžiku, kdy se pokusíte zavřít okno, nebo přejít na jinou adresu zadanou do adresního řádku prohlížeče, bude zobrazeno varování.

Princip aplikace spočívá v zachycení události před zavřením okna – a zde zjistíme, že žádná taková událost standardně neexistuje. V MSIE je k dispozici událost onbeforeunload, v jejíž obsluze můžeme následně provést libovolné operace, varovat uživatele a případně zamezit probublání události dále, což zabrání zavření okna prohlížeče. Bohužel, tato událost nastává nejen při zavření okna, ale také při přechodu na jinou stránku nebo obnovení stránky, prakticky při každém „opuštění“ stávajícího obsahu dokumentu. Z bezpečnostních důvodů pochopitelně nelze zjistit, na kterou stránku uživatel přechází, nemůžeme tudíž naše varování potlačit, pokud by například uživatel prováděl obnovení stránky. Řešením je proto použít rámce – funkce hlídající nezavření okna bude v nadřízeném rámci a práce s aplikací, procházení mezi stránkami, se bude odehrávat v rámci. Z hlediska funkce je lhostejno, zda půjde o klasický frameset, nebo o vnořený rámec (iframe), pro jednoduchost jsem připravil naši ukázku pomocí vnořeného rámce. Jde o metodu, kterou jsme na Intervalu již popsali pro zajištění nepřerušeného zvuku na pozadí při procházení stránek.

Pokud nechceme skriptem nijak ovládat, zda se varování zobrazí nebo ne, stačí přidat následující atribut do stránky:

onbeforeunload=“return ‚Opuštěním stránky se neuložené údaje ztratí.‘;“

Pokud chceme zobrazení varování ovládat pomocí skriptu nebo provést více akcí, je lepší si napsat zvláštní funkci. Ve funkci můžete použít pro stornování probublání události vlastnost cancelBubble a nebo pro zobrazení dialogu s upozornění vlastnost returnValue, jako je tomu v našem příkladu. Můžeme si třeba založit proměnnou, kterou pak nastavujeme v závislosti na akcích uživatele ve vnitřním rámci. Pokud se například uživatel korektně odhlásí, nastavíme naši proměnnou tak, aby se již varování nezobrazilo, uplatnění záleží na dané aplikaci a kreativitě jejího tvůrce.

Příklad stránky s funkcí, která jen zamezí zavření okna a upozorní uživatele (žádná přidaná testování, zda zobrazit či nezobrazit varování, zde nejsou):

<?xml version=“1.0″ encoding=“utf-8″ ?>
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“cs“ lang=“cs“ dir=“ltr“>
<head>
    <meta http-equiv=“Content-type“ content=“text/html; charset=utf-8″ />
    <meta http-equiv=“Content-script-type“ content=“text/javascript“ />
    <title>Upozornit před zavřením</title>
    <script type=“text/javascript“>
      <!– <![CDATA[
      function onExit()
      {
        window.event.returnValue= „Opuštěním stránky se neuložené údaje ztratí.“;
      }
      //]]> –>
    </script>
</head>
<body onbeforeunload=“onExit();“>
    <iframe src=“Page1.html“ width=“100%“ height=“100%“ frameborder=“0″></iframe>
</body>
<html>

Obdobný princip využívá i známé ICQ2Go!, kde dochází k zobrazení varování v případě, že je uživatel online. Pokud je uživatel offline, žádné varování se nezobrazuje a okno se bez reptání zavře.