logo

Jak mohu přepsat dialog OnBeforeUnload a nahradit jej vlastním?

Potřebuji uživatele varovat před neuloženými změnami, než opustí stránku (docela běžný problém).

window.onbeforeunload = handler

Funguje to, ale vyvolává to výchozí dialog s obtěžující standardní zprávou, která zalamuje můj vlastní text. Potřebuji buď úplně nahradit standardní zprávu, aby byl můj text jasný, nebo (ještě lépe) nahradit celý dialog modálním dialogem pomocí jQuery.

Zatím jsem selhal a nenašel jsem nikoho jiného, ​​kdo by na to měl odpověď. Je to vůbec možné?

Javascript na mé stránce:

<script type="text/javascript">   
    window.onbeforeunload = closeIt;
</script>

Funkce closeIt():

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

Pomocí jQuery a jqModal jsem zkoušel něco podobného (pomocí vlastního dialogu pro potvrzení):

$(window).beforeunload(function () {
    confirm('new message: ' + this.href + ' !', this.href);
    return false;
});

což také nefunguje – zdá se, že se nemohu vázat na beforeunload událost.

Odpověď

Výchozí dialog pro onbeforeunload nelze upravit , takže nejlepším řešením může být pracovat s ním.

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

Zde je odkaz od společnosti Microsoft:

Když je řetězec přiřazen k vlastnosti returnValue okna.event, zobrazí se dialogové okno, které uživatelům dává možnost zůstat na aktuální stránce a zachovat řetězec, který jí byl přiřazen. Výchozí příkaz, který se objeví v dialogovém okně:„Opravdu chcete opustit tuto stránku? … Chcete-li pokračovat, stiskněte tlačítko OK nebo chcete-li zůstat na aktuální stránce, stiskněte tlačítko Zrušit.“, nelze odstranit ani změnit.

Zdá se, že problém je:

  1. Když onbeforeunload je volána, bude mít návratovou hodnotu handleru jako window.event.returnValue .
  2. Potom analyzuje vrácenou hodnotu jako řetězec (pokud není null).
  3. Od false je analyzován jako řetězec, spustí se dialogové okno, které poté předá odpovídající true /false .

Výsledkem je, že se zdá, že neexistuje způsob, jak přiřadit false na onbeforeunload abyste mu zabránili ve výchozím dialogu.

Další poznámky k jQuery:

  • Nastavení události v jQuery může být problematické, protože to umožňuje jiné onbeforeunload události, které také nastanou. Pokud si přejete, aby došlo pouze k události uvolnění, držel bych se pro to prostého JavaScriptu.

  • jQuery nemá zkratku pro onbeforeunload takže budete muset použít obecný bind syntaxe.

    $(window).bind('beforeunload', function() {} );

Upravit 9. 4. 2018 :vlastní zprávy v dialogových oknech onbeforeunload jsou od verze chrome-51 zastaralé (srovnej:poznámka k vydání)