Jak vytvořit jednoduché upozornění na událost onbeforeunload (zavření prohlížeče nebo opuštění stránky) [aktualizováno]

editace:poděkujte Alexi Lohrovi za návrh vložit kód do useEffect :)

Zde je užitečný malý úryvek, pokud máte stránku, jako je pokladna nebo průzkum, a chcete varovat lidi, aby stránku opustili dříve, než ji dokončí.

  window.onbeforeunload = (event) => {
    if (whatever your condition is here) {
      return true;
    }
  };


// inside a useEffect:
useEffect(() => {
  if (conditionState) {
    const listener = () => true
    window.addEventListener('beforeunload', listener)
    return () => window.removeEventListener('beforeunload', listener)
  }
}, [conditionState])


// the return here removes the eventListener, until next time the useEffect runs again 

Upozornění dává uživateli možnost potvrdit nebo zrušit svou navigaci. Upozornění by však nikdy neměla někomu bránit v opuštění stránky nebo zavření prohlížeče; to je velké ne-ne.

Událost onbeforeunload nastane, když se dokument (aktuální stránka vašeho webu/aplikace) chystá uvolnit (zavřít/ukončit). Příkladem může být někdo, kdo zavře okno prohlížeče nebo klikne na odkaz na jinou stránku.

Většina prohlížečů zobrazí výchozí zprávu jako „provedené změny nebudou uloženy“. Tuto zprávu nemůžete upravit, ale funguje jako varování. Díky tomu nemusíte ve funkci vracet žádný konkrétní obsah nebo zprávu, stačí vrátit true, aby funkce fungovala.

Tato funkce bude volána, když dojde k události onbeforeunload. Pokud je podmínka uvnitř splněna, funkce vrátí hodnotu true a zobrazí se výstraha. Takže vše, co musíte udělat, je použít podmínku, abyste rozhodli, kdy se upozornění zobrazí. Pokud to například použijete v aplikaci React, pak by podmínka mohla být založena na určitém stavu.

Existují i ​​jiné způsoby, jak dosáhnout tohoto druhu chování, jako je použití Prompt v Reag-routeru, ale pokud hledáte jednoduché řešení, doufám, že vám to pomůže! Pokud chcete něco přidat, zanechte prosím komentář.