Come posso verificare per accertarmi che una finestra venga utilizzata attivamente e, in caso contrario, avvisare l'utente finale che stanno per disconnettersi?

Question

Lavorando su un nuovo sistema di back-end per la mia azienda, e una delle loro richieste è che una finestra venga bloccata e che l'utente venga inviato alla schermata di accesso se lo lascia inattivo per troppo tempo.

Immagino che lo farei con JavaScript collegando gli ascoltatori a clic, spostamenti del mouse e digitazioni, ma mi preoccupo di fare scherzi con altri script.

Qualche suggerimento?

Answer 1

Innanzitutto, affinché ciò sia efficace, è necessario assicurarsi che gli utenti siano disconnessi sul server al termine di questo tempo di inattività. Altrimenti, nulla di ciò che fai sul lato client è efficace. Se li invii a una pagina di accesso, possono semplicemente fare clic sul pulsante Indietro.

In secondo luogo, il modo convenzionale per farlo è utilizzare un "meta refresh" etichetta. Aggiungendo questo alla pagina:

<meta http-equiv="refresh" content="900;url=http://example.com/login"/>

li invierà alla pagina di accesso dopo 15 minuti (900 secondi). Questo li invierà lì anche se stanno facendo qualcosa sulla pagina. Non rileva attività. Sa solo da quanto tempo la pagina è rimasta nel browser. Questo di solito è abbastanza buono perché le persone non impiegano 15 minuti per riempire una pagina (stackoverflow.com è un'eccezione notevole, immagino.)

Se hai davvero bisogno di rilevare attività sulla pagina, penso che il tuo primo istinto sia corretto. Dovrai aggiungere gestori di eventi a diverse cose. Se sei preoccupato di fare confusione con altri script per la convalida o altre cose, dovresti cercare di aggiungere programmatori di eventi a livello di programmazione piuttosto che in linea. Cioè, invece di usare

<input type="text" onClick="doSomething;">

Accedi al modello a oggetti direttamente con

Mozilla way:   element.addEventListener('click' ...)
Microsoft way: element.attachEvent('onclick' ...) 

e quindi assicurati di passare gli eventi dopo averli ricevuti, in modo che il codice esistente faccia ancora qualsiasi cosa (convalida?) si suppone debba fare.

http://www.quirksmode.org/js/introevents.html ha una buona scrittura su come farlo.

-
BMB

Answer 2

Potresti semplicemente fare un logout se l'utente non cambia pagina dopo così tanto tempo. Questo è ciò che sembra fare il sistema dei corsi di apprendimento Angel.

L'altro problema che dovrai affrontare è che alcuni utenti disabilitano JavaScript.

Answer 3

Se riesci a inserire il codice nella pagina, ci sono due cose:

• Javascript cerca movimento del mouse, attività della tastiera e scorrimento.
• Inserisci un tag meta refresh nell'html: se si trovano su quella pagina per più di X minuti, verrà automaticamente reindirizzato alla pagina di accesso.

Se puoi solo inserire codice sul server:

• Mantieni una sessione (cookie o altro) che tiene traccia del tempo tra le modifiche alla pagina. Se una pagina viene richiesta per più di X minuti dall'ultima richiesta, non pubblicare la pagina richiesta, servire la pagina di accesso.

È possibile utilizzare insieme le tecniche meta refresh e server. La pagina aggiornata andrà a " la tua sessione sta per scadere, fai clic qui per tornare indietro e continuare a lavorare entro 30 secondi " ;.

Il pulsante su cui fanno clic ripristina la sessione del server ed esegue una funzione di ritorno alla pagina in modo che tutti i dati che avevano (nella maggior parte dei browser) rimarranno lì. Richiede JavaScript sulla pagina di aggiornamento, ma nessuno sulla pagina originale - solo un meta aggiornamento. Il monitoraggio delle attività Javascript sarebbe il migliore però.

-Adam

Answer 4

Nell'evento di caricamento della pagina è possibile utilizzare setTimeout per attivare una funzione che avvisa l'utente che verranno disconnessi se non aggiornano la pagina.

Con timeout di sessione di 5 minuti è possibile inviare avvisi dopo 4 minuti:

setTimeout(timeoutWarning, 240000);

function timeoutWarning() {
  if(confirm('You have been idle for a while.  Would you like to remain logged in?'))
    window.location.refresh();
}