javascript - srcdoc - iframe width




Rilevazione di una finestra di sistema che sovrappone un iframe (2)

Dopo aver visto questo video di YouTube, ero curioso di sapere come alcune delle funzionalità mostrate possono essere implementate con JS.

Una delle mie domande principali è come si può rilevare un'altra finestra di sistema (come la finestra di parole, mostrata nel video) sull'iframe.

Su un altro video c'è un suggerimento che suggerisce che la tecnica si basa sul fatto che i browser ottimizzano il rendering per gli elementi che sono fuori dalla vista.

Non potevo sfruttare quali sono i metodi / proprietà esatti utilizzati.

Quali sono i tuoi pensieri?


È necessario controllare document.hasFocus e posizione / dimensione di finestre e monitor.

Forse così:

Puoi provare la mia demo qui: 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));

Anche :


Quello che so è possibile rilevare se la pagina è in primo piano o in background - o più precisamente: se ha messa a fuoco o non ha messa a fuoco.

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

Lo snippet di codice precedente utilizza onblur di eventi e onfocus per la focus e la blur eventi.

È possibile utilizzare l' API Visibility migliore:

  • funziona quando si cambiano le schede (la pagina può rilevare che l'utente ha aperto un'altra scheda)

Nota: mentre onblur e onfocus ti diranno se l'utente cambia windows, non significa necessariamente che sia nascosto. Le pagine si nascondono solo quando l'utente cambia scheda o riduce a icona la finestra del browser che contiene la scheda.

vedi Rileva se la scheda del browser è attiva o l'utente è passato

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

Per lo scorrimento c'è un Intersection Observer

fornisce un modo per osservare in modo asincrono le modifiche nell'intersezione di un elemento di destinazione con un elemento antenato o con una finestra di un documento di livello superiore

// EDIT: Nowdays non è possibile rilevare casi del genere come ad esempio nel primo video che hai postato (in 2:09) quando un'altra finestra oscura qualche elemento:

Se sbaglio, per favore correggimi.

relazionato:







render