V browseru, na stránkách, kde dochází k editaci záznamů, či jiné aktivitě, kterou je potřeba zakončit uložením či volbou nějakého tlačítka, se nám může hodit využít události onBeforeUnload k zobrazení potvrzovacího dialogu s dotazem, zde si uživatel opravdu přeje stránku opustit.
<html>
<head>
<script type="text/jscript">
// inicializace
g_blnCheckUnload = true;
function RunOnBeforeUnload()
{
if (g_blnCheckUnload)
{
window.event.returnValue = 'Text, který bude přidán do confirmačního dialogu';
}
}
function bypassCheck()
{
g_blnCheckUnload = false;
}
</script>
</head>
<body onBeforeUnload="RunOnBeforeUnload();">
<a href="http://www.havit.cz">dotaz zobrazen</a>
<a href="http://www.havit.eu" onClick="bypassCheck">dotaz nezobrazen</a>
</body>
</html>
Událost onBeforeUnload se volá nejenom na odkazech a tlačítkách, ale i při zavírání okna prohlížeče a prakticky veškerých událostech, kde by mělo dojít k opuštění stránky.
Funguje to minimálně v Internet Exploreru a FireFoxu.
Modifikace s hlídáním změn
Nakonec se mi podařilo rozchodit i rozumnou podobu výše uvedeného, kdy je potvrzovací dotaz zobrazen jen při změně formulářových dat (a je tedy potřeba změny uložit):
<html>
<head>
<script type="text/jscript">
// inicializace
g_blnCheckUnload = false;
function RunOnBeforeUnload()
{
if (g_blnCheckUnload)
{
window.event.returnValue = 'Text, který bude přidán do confirmačního dialogu';
}
}
function bypassCheck()
{
g_blnCheckUnload = false;
}
function setupCheck()
{
g_blnCheckUnload = true;
}
registerEvents()
{
for (i = 0; i < document.forms[0].elements.length; i++)
{
document.forms[0].elements[i].onchange = setupCheck;
}
}
</script>
</head>
<body onLoad="registerEvents();" onBeforeUnload="RunOnBeforeUnload();">
<form ...>
<input .../>
...
</form>
<a href="http://www.havit.cz">dotaz zobrazen, jsou-li změny</a>
<a href="http://www.havit.eu" onClick="bypassCheck">dotaz nezobrazen</a>
</body>
</html>