Question

当您需要暂时离开Web应用程序和计算机时，可以通过再次输入您的唯一密码，将其置于屏幕锁定状态并将其解锁，这是一种安全的方法。显示我们的登录屏幕而不在我们的Web应用程序中注销您似乎很容易添加这样的锁屏页面。

锁定Metronic的屏幕演示

但我怎样才能完善锁屏的逻辑。例如，我可以让其他人不能使用向前或向后工具更改当前网址吗？

Answer 1

忽略它的登录部分，因为您应该使用AJAX发送到服务器并通过SSL登录：

＆＃13;

// 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();
});

});

＆＃13;

/* 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;
}

＆＃13;

<!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>

＆＃13;

以上代码显示了如何使用10秒计时器实现此目的。

Answer 2

根据定义，你不能。

向后和向前按钮是浏览器的功能，所以你无法用Javascript改变它。

你能做的就是当用户被锁定时，他无法离开锁定页面（如果锁定每个页面重定向到锁定页面）

如何完善锁屏逻辑？

2 个答案: