Browserfenster minimieren, schließen mittels Ajax protokollieren

[kaitheo]

Hallo,

ich möchte gerne, dass, wenn ein Seitenanschauer das Browserfenster schließt, minimiert oder in den Hintergrund stellt, eine JS-funktion ausgelöst wird, so dass ich meinen Ajax Request schicken kann und diese Aktion in einer z. B. Datenbank festhalten kann.
Geht das überhaupt? Kennt jemand ein Codebeispiel?

Vielen Dank für eure Hilfe!

[mikdoe]

Hi!
Die Eventhandler von JS im Browser findest du hier: Javascript Events und Event Handler | mediaevent.de bei "User Interface – UI Events" müsstest du - zumindest teilweise - fündig werden.

[kaitheo]

Hi mikdoe,
danke für die Antwort, die Seite kannte ich noch nicht und ist ganz gut. Das einzige Event, das mir hier direkt helfen könnte ist onunload.

$(document).ready(function(){
   window.onunload = function() {
       	$.get("wegschauen_petzen.php");
   }
});

Allerdings löst es nur aus, wenn ich eine neue URL eingebe oder - zumindest in MS Edge - beim Betätigen des Vor- Zurückbuttons bzw. Schließen des Tabs.

Ich suche allerdings ein Event, dass auslöst, sobald der User explizit nicht mehr meine Seite im Fokus hat, sondern was anderes macht. Z. B. Das Fenster minimiert, einen neuen Tab oder eine neue App öffnet, etc.

Vielleicht geht das ja irgendwie über einen Umweg?

[mikdoe]

da musst du mal mit onblur spielen

und deine suchphrase für google ist: js how to onblur window

[kkapsner]

Soweit ich wieß, funktioneirt blur da auch nicht - und das finde ich gut.

Warum willst du das überhaupt machen?
PS: onunload wird mit einem AJAX-Request auch nicht gehen, da direkt danach die neue Seite geladen wird, alles JS und damit auch das AJAX zurückgesetzt wird.

[kaitheo]

blur führt leider auch nicht zum Ziel.

Prinzipiell finde ich es auch gut, dass google & Co durch ein Fehlen dieser Funktion mein Surfverhalten weniger ausspionieren können. Aber in meinem Fall wäre es sehr praktisch und datenschutzmäßig unbedenklich:

Ich erstelle derzeit ein FrageQuiz auf PHP/mySql Basis, das nur im Intranet mithilfe eines lokalen Webservers gespielt werden kann. Die Teilnehmer benutzen hierfür ihr Smartphone. Ich möchte dabei überwachen können, ob sie sich von der Seite wegbewegen, um Schummeln zu vermeiden.

Irgendeine andere Idee, wie sich das realisieren lässt?

[mikdoe]

als webapp könnte man das wahrscheinlich machen. bei einem bekannten benutzerkreis wäre eine plugin install. kein problem.

[kaitheo]

Ja, die Seite, die ich erstelle ist natürlich nichts anderes als eine Webapp.
Eine Webapp basiert ja auch auf die gängigen Webtechniken html / JS / PHP etc. und ist meiner Erkenntnis nach nichts anderes als eine Website mit Betonung auf Userinteraktion, die vom Browser dargestellt werden kann. Also nur ein neuer Begriff für etwas, was es ohnehin schon gibt.
Der Vorteil gegenüber normalen Apps ist, dass sie plattformunabhängig ist und ohne Installation über den Browser läuft. Genau so was möchte ich.

Von welchen Plugins spricht du also, die mir da helfen könnten?

[tsseh]

PhoneGap API Documentation

[kkapsner]

Soweit ich weiß, pausiert eine normale App, wenn sie bei einem Smartphone nicht mehr ganz oben ist. Du könntest also mit window.setInterval() überprüfen, ob die Ausführung unterbrochen wurde.

[kaitheo]

@window.setIntervall():
soeben mit zwei mobilen Browsern ausprobiert: Die Funktion wird auch ausgeführt, wenn der Browser inaktiv ist. Leider also nicht brauchbar :-(

@PhoneGap:
klingt wirklich richtig interessant, ist aber leider für mich eine große neue Baustelle, auf die ich mich einlassen müsste(und wenn ich genug Zeit hab, sicherlich auch mache). Gibt's da ein empfehlenswertes Buch zu?

[SteelWheel]

Ansätze ...
SO: klick

Page Visibility API: klick

Greensock: klick

[kaitheo]

Hallo SteelWheel,
danke für deinen Post, der hat mir wirklich weitergeholfen! Bin dann auf das Script auf dieser Seite gestoßen und hab's ein bißchen verändert. Funktioniert für meine Zwecke einwandfrei!

// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

// löst aus, wenn der Browser(tab) minimiert oder geschlossen wird
function handleVisibilityChange() {
  if (document[hidden]) wegSchauenPetzen(); 
}
document.addEventListener(visibilityChange, handleVisibilityChange, false);

// löst aus, wenn eine URL eingegeben wird oder der Zurückbutton getätigt wird
window.onunload = function() {
	wegSchauenPetzen(); 
}

//Aktion, die beim Verlassen der Seite geschehen soll
function wegSchauenPetzen() {
	// Rufe per Ajax PHP Script auf
       	$.get("wegschauen_petzen.php");
}