window.onblur & window.onfocus
Marc Gutt
- javascript
Hallo!
Das Thema wurde hier bereits behandelt, aber nicht zu Ende gebracht:
http://forum.de.selfhtml.org/archiv/2005/11/t119416/
Ich habe ein Chat-Fenster welches beim Eingang neuer Nachrichten einen Sound abspielen soll. Dies soll aber nur erfolgen, wenn das Fenster selbst keinen Focus mehr besitzt.
Nun habe ich folgendes realisiert:
############################################
// Sound switch
var play_sound = false;
function sound_on()
{
play_sound = true;
}
function sound_off()
{
play_sound = false;
}
############################################
Dann wenn ein Nutzer ein Kommentar absendet:
############################################
function sendComment()
{
play_sound = false;
//...
insertNewContent
//...
}
############################################
Als letztes wird beim Darstellen neuer Kommentare alle paar Sekunden geprüft und bei Bedarf abgespielt wie folgt:
############################################
function insertNewContent(liName, liText, liTime, last_id)
{
//...
// play sound
window.onblur = sound_on;
window.onfocus = sound_off;
if ( play_sound )
{
if (navigator.appName.indexOf ("Microsoft") !=-1)
{
document.getElementById("chatsound").Play();
setTimeout('document.getElementById("chatsound").Play();', 1500);
}
else
{
document.embeds[0].Play();
setTimeout('document.embeds[0].Play();', 1500);
}
}
//...
}
############################################
Unter anderem habe ich das hier gefunden:
http://www.thefutureoftheweb.com/blog/detect-browser-window-focus
Im IE scheint das ganze zu funktionieren. Beim FF ist der Sound dagegen an, sobald ich das 2. Kommentar absende. Und er bleibt auch an. Obwohl ich ja noch extra in sendComment() den Sound abschalte, wenn man eigene Kommentare absendet. D.h. onblur wird immer ausgeführt, auch wenn das Fenster aktiv ist. Erkennt jemand meinen Fehler oder hat der FF grundsätzlich ein Problem mit diesem Konstrukt?
Gruß
Marc
Also ich teste jetzt den Focus in dem ich einem Bild einen Rand verschaffe, sobald der Ton an ist. Dabei ist mir aufgefallen, dass die Position zum Ausschalten des Tones entscheident ist im FF:
############################################
function sendComment()
{
setTimeout("document.forms['chatForm'].submit.disabled = true;", 0);
setTimeout("document.forms['chatForm'].submit.disabled = false;", refresh_time);
//currentChatText = encodeURIComponent(document.forms['chatForm'].elements['chatbarText'].value);
currentChatText = escape(document.forms['chatForm'].elements['chatbarText'].value);
if (currentChatText != '' & (httpSendChat.readyState == 4 || httpSendChat.readyState == 0))
{
param = 'act=add&c='+ currentChatText;
httpSendChat.open("POST", ChatActionurl, true);
httpSendChat.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
httpSendChat.onreadystatechange = handlehHttpSendChat;
// Timeout Prevention
sendTimeout = setTimeout("ajaxTimeout(2);", (refresh_time/2));
httpSendChat.send(param);
document.forms['chatForm'].elements['chatbarText'].value = '';
document.forms['chatForm'].elements['chatbarText'].focus();
}
sound_off();
}
############################################
Ich habe jetzt nicht durchgetestet welche Funktionen den FF beeinflusst, aber eine davon sorgt dafür, dass onblur aktiv wird. Mit der Positionierung in die letzte Zeile klappt es nun.
ABER es gibt noch einen Haken. Und zwar bei Wechsel der Fenster ist es entscheident, ob der Focus auf der Seite liegt oder im Textfeld des Formulars. Solange der Focus im Textfeld liegt (was ich ja will, damit der User nicht extra das Feld anklicken muss), erfolgt keine Änderung beim Focus. Erst wenn man sonst wo auf der Seite etwas anklickt und dann das Fenster wechselt ist onblur aktiv und schaltet den Sound ab.
Dabei habe ich den ganze Vorgang auch im IE getestet, der die ganze Sache wieder anders interpretiert. Hier verliert das Fenster erst dann seinen Focus, wenn ich zurück zum Chat komme. Also eigentlich falsch herum. Sende ich ein Kommentar ab ist der Sound wieder aus, aber wenn ich das Fenster wechsel ist onblur nicht aktiv. Tatsächlich müsste ich jetzt hingehen das Fenster wechseln, dann zurück zum Chat, um onblur zu aktivieren und dann kann ich erst das Fenster wechseln, um dann bei neuen Einträgen informiert zu werden.
Dabei gibt es dann noch ein Phänomen. Da ich erst später herausgefunden hatte, dass ein alert() den focus beeinflusst und dadurch im FF eine Unendlichschleife resultierte entschied ich mich dafür allgemein nach allen Alerts auf der Seite den Ton noch mal nachträglich auszuschalten. Aber im IE greift das nicht. Ich sehe, dass onblur den Ton aktiviert hat. Nun klicke auf den Zitat-Button der nun eine Fehlermeldung resultiert, weil ich keinen Text markiert habe, aber danach schaltet sich der Ton nicht ab, obwohl ich es so eingestellt habe:
############################################
else
{
alert('Wählen Sie einen Text von der Seite und versuchen es noch einmal');
sound_off();
}
############################################
Das konnte ich in den Griff kriegen, in dem ich einen Timeout verwendet habe:
############################################
setTimeout("sound_off();", 100);
############################################
Es gibt aber immer mehr Probleme, umso weiter ich das teste. Manchmal setzt der IE bereits das blur, wenn ich beim Öffnen der Seite nur irgendwo im Chat hinklicke. Was ja auch falsch ist. Manchmal klappt es dagegen.
Das entwickelt sich langsam zu einem Lottospiel :(
Ich habe jetzt ein DIV um den Chat gebaut und den mit onmouseout ausgestattet. Jetzt gehts soweit. Habe nur noch das Problem, dass das DIV nur einen Teil des äußeren Randes ausmacht und in der Mitte des Chats schon der Wechsel mit der Maus von Beiträgen zum Formular den Ton anschaltet. Wenn das jetzt noch hinhaut, dann bin ich glücklich.
Ich habe jetzt ein DIV um den Chat gebaut
Also irgendwie will das auch nicht. Im IE überdeckt die DIV Ebene trotz ihrer Eigenschaften nicht das Formular oder bestehende Tabellen. D.h. wenn ich innerhalb des DIVs in einen <table> Bereich gelange schaltet onmouseout.
Hier mein Code fürs DIV:
##########################################
onmouseout="sound_on()" style="position:absolute;left:0px;top:0px;width:740px;height:560px;z-index:1;"
##########################################
Oberste Ebene ist es wie man sieht und es richtig positioniert. Nützt leider nichts. Ist zwar jetzt ein CSS-Problem, aber ich wäre über jeden Lösungsweg glücklich.
Gruß