Meldung, wenn Seite verlassen wird

[Linuchs]

Moin,

ich habe zum Teil große Listen, die einige Sekunden brauchen, bevor sie auf dem Bildschirm erscheinen.

Üblich ist [F5] für die Aktualisierung. Bisher passierte nichts Sichtbares.

Nun dieses:

  window.onbeforeunload = function() {
    document.getElementsByTagName( "body" )[0].style.backgroundColor = "#fdd";
    alert( "Seite wird verlassen" );
  }

Der Hintergrund bekommt die gewünschte Farbe, alert poppt aber nicht auf. Warum nicht?

Noch besser wäre eine Meldung, die ich unter "Element untersuchen" sehen kann:

Warten auf www.example.com

Wie komme ich an die Information, welche Domain gerufen wird?

Linuchs

[Rolf b]

MDN schreibt:

Since 25 May 2011, the HTML5 specification states that calls to window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event. See the HTML5 specification for more details.

Rolf

[Linuchs]

Hallo Rolf,

danke dir für die Recherche.

[Rolf b]

Wenn Du dieses Problem umgehen willst, und auch anzeigen willst, was geladen wird - geht dann ggf. ein AJAX-Download der Liste in eine Containerseite? Du könntest dann den AJAX-Request losschicken und ein Info-Feld auf der Seite mit "Lade Dinxbumz-Liste, bitte solange einen Kaffee trinken" befüllen. Ich weiß nur nicht, ob das dann unterm Strich schneller ist. Vielleicht auch ein iframe, in dem Du von außen navigierst (müsste bei same origin gehen, oder?)

Rolf

[Linuchs]

Hallo Rolf,

Du könntest dann den AJAX-Request losschicken …

Wozu? Der Server weiss doch nicht, welche Folgeseite der Browser laden will …

Habe das jetzt erstmal so gelöst und bin zufrieden. Wenn ich statt des Feldes so einen animierten Kreis finde, würde ich den nehmen. Habe ich aber in vertretbarer Zeit nicht gefunden. Werde mir einen "fangen", wenn ich ihn im Unterholz des WWW erwische.

window.addEventListener('DOMContentLoaded', function ( ) {
... 
  // 2017-05-11  Warte-Anzeige beim Verlassen der Seite
  var erster  = document.getElementsByTagName( "body" )[0].firstChild;
  var newDiv  = document.createElement("div");
  newDiv.id               = "seite_verlassen";
  newDiv.style.display    = "none";
  newDiv.style.position   = "fixed";
  newDiv.style.left       = "0";
  newDiv.style.width      = "100%";
  newDiv.style.top        = "0";
  newDiv.style.height     = "100%";
  newDiv.style.background = "rgba( 255,255,255,.6)";
  newDiv.style.textAlign  = "center";
  newDiv.innerHTML        = "<br><br><span style=\"display:inline-block;font-size:300%;background:#fff;padding:2em\">warte auf neue Seite ...</span>";
  document.body.insertBefore( newDiv, erster );
});

window.addEventListener('beforeunload', function () {
//document.getElementsByTagName( "body" )[0].style.backgroundColor = "#faa";
  document.getElementById( "seite_verlassen" ).style.display = "block";
});

Linuchs

[Matthias Apsel]

Hallo Linuchs,

„spinner“ könnte dein Suchbegriff sein.

Bis demnächst
Matthias

[Linuchs]

Hallo Matthias,

„spinner“ könnte dein Suchbegriff sein.

Im ersten Moment dachte ich - Spinner? Ist mein Plan so abwegig?

Aber ja, da gibt's was, danke.

Die Anzeige kommt ja extrem schnell, ich wollte sie etwas verzögert anzeigen:

funktion zeigeSeitenende () {
  document.getElementById( "seite_verlassen" ).style.display = "block";
}
window.addEventListener('beforeunload', function () {
  setTimeout( zeigeSeitenende, 200 );
});

Aber jetzt kommt gar keine Anzeige mehr. Wahrscheinlich hat sich das Javascript nach Aufruf der nächsten Seite bereits verabschiedet.

Linuchs