molily: ladende html abrechen oder stoppen

Beitrag lesen

Hallo!

Dein selbstgebauter Confirm-Dialog blockt die Browser-Navigation nicht. Die eingebaute Funktion confirm() z.B. würde das tun.

Beim Klick auf den Button/Link, der den Seitenwechsel auslöst, kannst du erst einmal mit JavaScript die Standardaktion unterdrücken. Dadurch verhinderst du schon einmal den Seitenwechsel.

Erst wenn der Nutzer »Ja, ich möchte die Seite verlassen« in deinem Confirm-Dialog auswählt, soll ja die Seite verlassen werden. Dazu ist es sinnvoll, beim Klick auf a-Elemente das Linkziel zu speichern.

Mit JavaScript kannst du Klicks auf a-Elemente (Links) im ganzen Dokument überwachen (Event-Handling). Beispiel:

// Variable die die Adresse des geklickten Links speichert  
var targetURL;  
// Überwache Klicks im Dokument an zentraler Stelle  
var clickHandler = function(event) {  
  // Prüfe, ob das angeklickte Element ein Link ist  
  if (event.target.nodeName !== 'a') return;  
  // Unterdrücke Standardaktion  
  event.preventDefault();  
  // Merke die Adresse des Links  
  targetURL = event.target.href;  
  // … Zeige Confirm-Dialog …  
};  
document.body.[link:http://@title=addEventListener]('click', clickHandler, false);

Im Confirm-Dialog kannst du nun mit targetURL arbeiten. Im Falle der Bestätigung kannst du zur neuen Seite weiterleiten:

[ref:self812;javascript/objekte/location.htm#href@title=location.href] = targetURL;

Dieser Beispielcode ist ungetestet und soll das Prinzip verdeutlichen.

onbeforeunload ist eine weitere Möglichkeit, um einen browsereigenen Dialog beim Verlassen der Seite anzuzeigen. Das betrifft nicht nur Klicks auf Links, sondern alle Arten, wie man die Seite verlassen kann.

Grüße,
Mathias