Détection d'une fenêtre système superposant un iframe

Question

Après avoir regardé cette vidéo sur youtube , j'étais curieux de voir comment certaines des fonctions présentées, peuvent être mises en œuvre avec JS.

Une de mes grandes questions est de savoir comment peut-on détecter un autre système de fenêtre (comme la fenêtre de word, montré dans la vidéo) sur l'iframe.

Sur une autre vidéo, il y a un indice suggérant que la technique est basée sur le fait que les navigateurs optimiser le rendu pour les éléments qui sont hors de la vue.

Je n'arrivais pas à saisir ce que sont exactement les mêmes méthodes/propriétés qui sont utilisées.

Quelles sont vos pensées?

Answer 1

Ce que je sais, il est possible de détecter si la page est en premier plan ou en arrière - plan- ou plus précisément: si a le focus, ou n'a pas le focus.

var focus = true;
window.onblur = function() { focus = false; action(); }
window.onfocus = function() { focus = true; action(); }

document.onblur = window.onblur;
document.focus = window.focus;
	
function action(){
	if(focus) {
		document.body.style.background = "green";
	} else {
		document.body.style.background = "lightgray";
	}
}

try click inside and then outside

L'extrait de code ci-dessus utilise des écouteurs d'événement, onblur et onfocus pour les événements à focus et blur.

---

 

Mieux peut-être d'utiliser la Visibilité de l'API:

• il fonctionne lors de la commutation des onglets (page peut détecter que l'utilisateur a ouvert un autre onglet)

Remarque: lors de la onblur et onfocus vous dira si l'utilisateur passe windows, ça ne veut pas forcément dire qu'il est caché. Pages seulement sont masquées lorsque l'utilisateur passe onglets ou réduit la fenêtre du navigateur contenant de l'onglet.

voir Détecter si le navigateur de l'onglet est actif ou de l'utilisateur est passé loin

http://jsbin.com/lowocepazo/edit?js,sortie

---

Pour faire défiler, il y a une Intersection Observateur

fournit une manière asynchrone à observer des changements dans l'intersection d'un élément cible avec un élément ancêtre ou avec un document de niveau supérieur de la fenêtre d'affichage

---

//EDIT: De nos jours n'est pas possible de détecter de tels cas, comme par exemple dans la 1ère vidéo que vous avez posté (2:09) quand une autre fenêtre est masquée certains éléments:

Si je me trompe, corrigez-moi.

connexes:

• Comment puis-je savoir lorsque le navigateur s'arrête repeindre DOM couches/nœuds, car ils sont cachés?

• https://www.html5rocks.com/en/tutorials/speed/animated-gifs/

Answer 2

Vous devez vérifier, document.hasFocus et la position/taille de windows et l'écran du moniteur.

Peut-être comme ceci :

Vous pouvez essayer mon démo ici : https://jsfiddle.net/p9ahuo3t/

let bool = document.hasFocus();

$("p.info").text("in");
console.log(outerWidth + screenX)
if (screen.width < outerWidth + screenX) {
    bool = false;
    $("p.info").text("right side: out");
} else if ((outerWidth - innerWidth) + screenX < 0) {
    bool = false;
    $("p.info").text("left side: out");
} else if (screen.height < outerHeight + screenY) {
    bool = false;
    $("p.info").text("bottom side: out");
} else if ((outerHeight - innerHeight) + screenY < 0) {
    bool = false;
    $("p.info").text("top side: out");
}

if (currentChild && !currentChild.closed) {  
    let rectPage = {
        left:   (outerWidth - innerWidth) + screenX,
        top:    (outerHeight - innerHeight) + screenY,
        right:  outerWidth + screenX,
        bottom: outerHeight + screenY
    };

    let rectPopup = {
        left:   currentChild.screenX,
        top:    currentChild.screenY,
        right:  currentChild.outerWidth + currentChild.screenX,
        bottom: currentChild.outerHeight + currentChild.screenY
    }; 
    if (intersectRect(rectPage, rectPopup)) {
        $("p.info").text("eclipse with popup");
        bool = false;
    }
}
$page.text(pin(bool));

Aussi :

• Vous pouvez comparer le temps (+new Date()) entre les deux setInterval pour détecter les inactifs navigateur. Chrome et Firefox gaz setTimeout/setInterval dans les onglets inactifs.