2017-04-01 1 views
0

Wenn Sie Ihre Webanwendung und Ihren Computer vorübergehend unbeaufsichtigt lassen müssen, können Sie ihn sicher in den Bildschirmsperrstatus versetzen und ihn entsperren, indem Sie Ihr eindeutiges Kennwort erneut eingeben. Wenn Sie unseren Anmeldebildschirm sehen, ohne sich in unseren Webanwendungen abzumelden, scheint es einfach zu sein, eine Sperrbildschirmseite wie diese hinzuzufügen.Wie kann ich die Logik des Lock-Screen perfektionieren?

Bildschirm sperren Demo von Metronic

enter image description here

Aber wie kann ich die Logik der Lock-Screen perfektionieren. Zum Beispiel kann ich lassen die anderen Leute können nicht die Vorwärts- oder Rückwärts-Tools die aktuelle URL ändern?

+0

Führen Sie 'setTImeout' innerhalb von' mousemove' aus. Lassen Sie es einfach 'clearTimeout' und setzen Sie es jedes Mal neu, wenn sich die Maus bewegt. – PHPglue

Antwort

-1

Per Definition können Sie nicht.

Die Schaltflächen "Zurück" und "Vorwärts" sind Browserfunktionen, daher können Sie sie nicht mit Javascript ändern.

Was können Sie tun, ist aber immer dann, wenn ein Benutzer gesperrt ist gibt es keine Möglichkeit für ihn die Sperre Seite zu verlassen (wenn jede Seite Umleitung gesperrt Seite sperren)

+0

Ja, Sie haben Recht. Können Sie mir sagen, wie Leute die Sperrseite nicht verlassen können (wenn jede Seite gesperrt wird, um die Seite zu sperren). –

+0

Ich verwende Ereignisliste ** onbeforeunload **, aber die Seite kann nicht gesperrt werden. Kannst du mir einen Hinweis geben? 'window.onbeforeunload = function() {//}' –

0

den Login-Teil davon zu ignorieren, da Sie verwenden sollten, AJAX auf den Server und Anmeldung über SSL zu senden:

// external.js 
 
var doc, bod, htm, C, E, T; // for use on other loads 
 
addEventListener('load', function(){ 
 

 
doc = document; bod = doc.body; htm = doc.documentElement; 
 
C = function(tag){ 
 
    return doc.createElement(tag); 
 
} 
 
E = function(id){ 
 
    return doc.getElementById(id); 
 
} 
 
T = function(tag){ 
 
    return doc.getElementByTagName(tag); 
 
} 
 
var form = E('form'), fS = form.style, sub = E('sub'), tO; 
 
function tF(){ 
 
    // code within this func inside logout ajax 
 
    fS.display = 'block'; 
 
} 
 
form.addEventListener('submit', function(ev){ 
 
    ev.preventDefault(); 
 
}); 
 
sub.addEventListener('click', function(){ 
 
    // run code within this func inside login ajax 
 
    fS.display = 'none'; E('un').value = E('pw').value = ''; 
 
    tO = setTimeout(tF, 10000); 
 
    addEventListener('mousemove', function(){ 
 
    if(tO)clearTimeout(tO); 
 
    tO = setTimeout(tF, 10000); 
 
    }); 
 
}); 
 
form.addEventListener('keydown', function(ev){ 
 
    if(ev.keyCode === 13)sub.click(); 
 
}); 
 

 
});
/* external.css */ 
 
html,body{ 
 
    background:#000; padding:0; margin:0; 
 
} 
 
.main{ 
 
    width:980px; background:#fff; margin:0 auto; 
 
} 
 
#form{ 
 
    width:250px; background:green; padding:10px; 
 
} 
 
#form>label,#form>input{ 
 
    display:block; 
 
} 
 
#form>label{ 
 
    float:left; width:100px; color:#fff; 
 
} 
 
#form>input{ 
 
    width:140px; margin-bottom:10px; 
 
} 
 
#form>#sub{ 
 
    width:70px; height:30px; margin:0 auto; 
 
}
<!DOCTYPE html> 
 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
 
    <head> 
 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
 
    <title>Lockout</title> 
 
    <link type='text/css' rel='stylesheet' href='external.css' /> 
 
    <script type='text/javascript' src='external.js'></script> 
 
    </head> 
 
<body> 
 
    <div class='main'> 
 
    <form id='form'> 
 
     <label for='un'>USERNAME</label><input id='un' name='un' type='text' value='' /> 
 
     <label for='pw'>PASSWORD</label><input id='pw' name='pw' type='password' value='' /> 
 
     <input id='sub' type='button' value='LOGIN' /> 
 
    </form> 
 
    </div> 
 
</body> 
 
</html>

der obige Code zeigt, wie diese eine 10 Sekunden Timer zu erreichen.

Verwandte Themen