window.onfocus ne se déclenche pas dans IE7, incohérent dans Opera

Question

Notez que cela concerne les événements de focus et de flou sur une fenêtre, pas sur les champs de formulaire.

Je suis en train de charger un document dans une fenêtre pop-up, et il comprend le code suivant:

<script type="text/javascript"> 
window.onblur = function(){ document.title="BLURRED"; } 
window.onfocus= function(){ document.title="FOCUSED"; } 
</script> 

Ces fonctions sont temporaires, pour les tests. J'avais espéré employer ces événements pour placer un drapeau indiquant l'état de fenêtre; Je suis en train de créer une application de chat, et si les messages arrivent quand ils sont minimisés, j'attirerai l'attention. S'ils n'annulent pas quand la fenêtre est mise au point, ils seront juste ennuyeux.

En charge, je mets aussi l'accent dans une zone de texte. (Je ne sais pas si cela fait une différence.)

IE7 (je n'ai pas une autre version à portée de main) semble reconnaître le window.onblur mais pas le window.onfocus. Opera 10 est juste carrément étrange.

Voici ce qui se passe dans les navigateurs que j'ai. Je lance la fenêtre en cliquant sur le lien dans le parent, puis passez par plusieurs minimiser-restore cycles en cliquant sur le bouton de la fenêtre contextuelle sur le (Windows XP) la barre des tâches:

Safari 4:

• Ouvrir la fenêtre: Le document ouvre avec le titre d'origine
• Réduire: changements de titre à "TROUBLE"
• Restaurez: changements de titre à "focused"

C'est ce que je m'attendais à arriver.

Firefox 3.5:

• Ouvrir la fenêtre: Le document ouvre avec le titre original, puis passe à "focused"
• Réduire: Changements de titre à "TROUBLE"
• Restaurez: Changements de titre à " FOCUS "

L'onfocus onload est un peu une surprise, mais pas un problème.

IE7:

• Ouvrir la fenêtre: Le document ouvre avec titre original
• Réduire au minimum: Changements de titre à "TROUBLE"
• Restaurez: Titre ne change pas, peu importe combien de fois je bascule

Qu'est-il arrivé à onfocus?

Opera 10.5

• Ouvrir la fenêtre: Le document ouvre avec le titre original, mais dans un autre onglet, pas pop-up

... Parfois

• Réduire au minimum: Changements de titre à "TROUBLE"
• Restaurez: changements de titre à "focused"

Parfois ...

• Réduire au minimum: Changements de titre à "TROUBLE" puis "focused"
• Restore: Titre ne change pas

D'accord, cela est tout simplement bizarre ...

Je suis ouvert à d'autres approches, mais je voudrais vraiment comprendre ce qui se passe ici, dans le langage Javascript simple - donc s'il vous plaît ne donnez pas une réponse jQuery à moins qu'il n'y ait vraiment aucun autre moyen de contourner cela.

Merci!

Answer 1

onfocus et onblur sont voiturette sur l'objet de fenêtre dans IE. L'alternative est d'utiliser la propagation onfocusin et onfocusout événements:

function focusin() { document.title="BLURRED"; } 
function focusout() { document.title="FOCUSED"; } 

if ("onfocusin" in document) 
    document.onfocusin = focusin, 
    document.onfocusout = focusout; 
else 
    window.onblur = focousout, 
    window.onfocus= focusin; 

J'ai mis en place un exemple pour vous here.

focusIn et focusout, contrairement accent et flou, propagez événements; ils tireront pour les éléments dans la page et la bulle vers le haut. Vous devrez vérifier l'événement event.srcElement ou event.target si vous ne souhaitez pas agir sur cet événement pour tous les éléments de la page. Comme pour Opera, "étrange" est un mot que vous pouvez utiliser. La version sur ma machine ne déclenchera pas le flou ou les événements de mise au point sur la fenêtre pour moi. J'espère que quelqu'un d'autre peut vous offrir une solution pour cela.