Jak mogę zastąpić okno dialogowe OnBeforeUnload i zastąpić je własnym?

Muszę ostrzec użytkowników przed niezapisanymi zmianami, zanim opuszczą stronę (dość powszechny problem).

window.onbeforeunload=handler

To działa, ale wywołuje domyślne okno dialogowe z irytującą standardową wiadomością, która otacza mój własny tekst. Muszę albo całkowicie zastąpić standardowy komunikat, aby mój tekst był wyraźny, albo (jeszcze lepiej) zastąpić całe okno dialogowe modalnym oknem dialogowym za pomocą jQuery.

Jak dotąd zawiodłem i nie znalazłem nikogo, kto wydaje się mieć odpowiedź. Czy to w ogóle możliwe?

JavaScript na mojej stronie:

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

Funkcja closeIt ():

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

Używając jQuery i jqModal Próbowałem tego rodzaju rzeczy (używając niestandardowego okna dialogowego potwierdzenia):

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

co również nie działa - nie mogę się powiązać ze zdarzeniem beforeunload.

Nie możesz zmodyfikować domyślnego okna dialogowego onbeforeunload, więc najlepszym rozwiązaniem może być praca z nim.

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

Oto odniesienie do tego od Microsoft:

Gdy ciąg zostanie przypisany do właściwości returnValue window.event, pojawi się okno dialogowe, które daje użytkownikom opcję pozostania na bieżącej stronie i zachowania ciągu, który został do niej przypisany. Domyślne oświadczenie pojawiające się w oknie dialogowym „Czy na pewno chcesz opuścić tę stronę? ... Naciśnij OK, aby kontynuować lub Anuluj, aby pozostać na bieżącej stronie.”, Nie można usunąć ani zmienić.

Problemem wydaje się być:

1. Kiedy onbeforeunloadjest wywoływany, przyjmuje wartość zwracaną przez moduł obsługi jakowindow.event.returnValue .
2. Następnie przeanalizuje zwracaną wartość jako ciąg znaków (chyba że ma wartość NULL).
3. Ponieważ falseparsowany jako ciąg znaków, uruchomi się okno dialogowe, które następnie przekaże odpowiednie true/ false.

Wynik jest, nie wydaje się być sposób przypisywania falseaby onbeforeunloadzapobiec jej z domyślnym dialogu.

Dodatkowe uwagi na temat jQuery:

• Ustawienie zdarzenia w jQuery może być problematyczne, ponieważ pozwala również onbeforeunloadna wystąpienie innych zdarzeń. Jeśli chcesz, aby wystąpiło tylko zdarzenie rozładowania, trzymałbym się za to zwykłego kodu JavaScript.

• jQuery nie ma skrótu, onbeforeunloadwięc musisz użyć ogólnej bindskładni.

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

Edytuj 09.04.2018 : niestandardowe komunikaty w oknach dialogowych onbeforeunload są przestarzałe od chrome-51 (por. Uwaga do wydania )

To, co działało dla mnie, używając jQuery i przetestowane w IE8, Chrome i Firefox, to:

$(window).bind("beforeunload",function(event) {
    if(hasChanged) return "You have unsaved changes";
});

Ważne jest, aby niczego nie zwracać, jeśli monit nie jest wymagany, ponieważ występują tutaj różnice między IE a innymi zachowaniami przeglądarki.

Chociaż w niektórych okolicznościach nie można nic zrobić z tym pudełkiem, możesz przechwycić osobę klikającą link. Dla mnie było to warte wysiłku w przypadku większości scenariuszy i jako awarię opuściłem zdarzenie odciążające.

Użyłem Boxy zamiast standardowego okna dialogowego jQuery, jest on dostępny tutaj: http://onehackoranother.com/projects/jquery/boxy/

$(':input').change(function() {
    if(!is_dirty){
        // When the user changes a field on this page, set our is_dirty flag.
        is_dirty = true;
    }
});

$('a').mousedown(function(e) {
    if(is_dirty) {
        // if the user navigates away from this page via an anchor link, 
        //    popup a new boxy confirmation.
        answer = Boxy.confirm("You have made some changes which you might want to save.");
    }
});

window.onbeforeunload = function() {
if((is_dirty)&&(!answer)){
            // call this if the box wasn't shown.
    return 'You have made some changes which you might want to save.';
    }
};

Możesz dołączyć do innego wydarzenia i filtrować więcej na temat tego, jaki rodzaj kotwicy został kliknięty, ale to działa dla mnie i co chcę zrobić i służy jako przykład dla innych do wykorzystania lub ulepszenia. Pomyślałem, że podzielę się tym dla tych, którzy chcą tego rozwiązania.

Mam wycięty kod, więc może nie działać tak jak jest.

1) Użyj onbeforeunload, a nie onunload.

2) Ważne jest, aby unikać wykonywania instrukcji return. Nie mam przez to na myśli uniknięcia powrotu od twojego przewodnika. Zwracasz wszystko w porządku, ale robisz to, upewniając się, że dotarłeś do końca funkcji i NIE wykonujesz instrukcji return. W tych warunkach wbudowane standardowe okno dialogowe nie występuje.

3) Jeśli korzystasz z opcji onbeforeunload, możesz uruchomić wywołanie ajax w swoim module obsługi unbeforeunload, aby uporządkować serwer, ale musi to być synchroniczny i musisz poczekać i obsłużyć odpowiedź w module obsługi onbeforeunload (nadal szanując warunek (2) powyżej). Robię to i działa dobrze. Jeśli wykonasz synchroniczne wywołanie ajax, wszystko zostanie wstrzymane do momentu powrotu odpowiedzi. Jeśli zrobisz asynchroniczny, myśląc, że nie zależy ci na odpowiedzi z serwera, odciążanie strony będzie kontynuowane, a twoje wywołanie ajax zostanie przerwane przez ten proces - włączając zdalny skrypt, jeśli jest uruchomiony.

Spróbuj wstawić return;zamiast wiadomości. Działa to w większości przeglądarek. (To tylko naprawdę zapobiega prezentom dialogowym)

window.onbeforeunload = function(evt) {            
        //Your Extra Code
        return;
}

Nie można tego teraz zrobić w chrome, aby uniknąć spamowania, więcej szczegółów można znaleźć w javascript onbeforeunload, który nie wyświetla niestandardowej wiadomości .

Możesz wykryć, który przycisk (OK lub Anuluj) został naciśnięty przez użytkownika, ponieważ funkcja onunload wywoływana jest tylko wtedy, gdy użytkownik zdecyduje się opuścić stronę. Mimo to w tej funkcji możliwości są ograniczone, ponieważ DOM jest zawalony. Możesz uruchomić javascript, ale POST ajax nic nie robi, dlatego nie możesz użyć tej metody do automatycznego wylogowania. Ale istnieje na to rozwiązanie. Window.open ('logout.php') wykonane w funkcji onunload, więc użytkownik wyloguje się z nowym otwarciem okna.

function onunload = (){
    window.open('logout.php');
}

Ten kod jest wywoływany, gdy użytkownik opuszcza stronę lub zamyka aktywne okno, a użytkownik wylogował się z pliku „logout.php”. Nowe okno zamyka się natychmiast po wylogowaniu php z kodu:

window.close();

Napotkałem ten sam problem, mogłem uzyskać własne okno dialogowe z moją wiadomością, ale problem, z którym się spotkałem, to: 1) Dał komunikat na wszystkich nawigacjach, które chcę tylko dla kliknięcia. 2) z własnym komunikatem potwierdzającym, jeśli użytkownik wybierze opcję Anuluj, nadal wyświetla domyślne okno dialogowe przeglądarki.

Poniżej znajduje się kod rozwiązania, który znalazłem, który napisałem na mojej stronie wzorcowej.

function closeMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event; }
    if (evt && evt.clientX >= (window.event.screenX - 150) &&
        evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}
window.onbeforeunload = closeMe;

 <script type="text/javascript">
        window.onbeforeunload = function(evt) {
            var message = 'Are you sure you want to leave?';
            if (typeof evt == 'undefined') {
                evt = window.event;
            }       
            if (evt) {
                evt.returnValue = message;
            }
            return message;
        } 
    </script>

odnoszą się z http://www.codeprojectdownload.com

Co powiesz na użycie specjalnej wersji polecenia „bind” „one”. Gdy procedura obsługi zdarzeń zostanie wykonana po raz pierwszy, jest automatycznie usuwana jako procedura obsługi zdarzeń.

$(window).one("beforeunload", BeforeUnload);

Podejście kątowe 9:

constructor() {
    window.addEventListener('beforeunload', (event: BeforeUnloadEvent) => {
     if (this.generatedBarcodeIndex) {
      event.preventDefault(); // for Firefox
      event.returnValue = ''; // for Chrome
      return '';
     }
     return false;
    });
   }

Obsługa przeglądarek i usuwanie niestandardowego komunikatu:

• Chrome usunął obsługę niestandardowej wiadomości w wersji 51 min
• Opera usunęła obsługę niestandardowej wiadomości w wersji 38 min
• Firefox usunął obsługę niestandardowej wiadomości w wersji 44,0 min
• Safari usunęło obsługę niestandardowej wiadomości w wersji 9.1 min