如何完善鎖屏邏輯？

當您需要暫時離開您的Web應用程序和計算機時，可以通過再次輸入您的唯一密碼將其置於屏幕鎖定狀態並解除鎖定。顯示我們的登錄屏幕而無需登錄您的網頁應用程序似乎很容易添加像這樣的鎖定屏幕頁面。從Metronic的如何完善鎖屏邏輯？

鎖屏演示

但我怎麼能完美鎖屏的邏輯。例如，我可以讓其他人不能使用前進或後退工具更改當前的網址嗎？

來源

2017-04-01 Jian Lin

在'mousemove'內運行'setTImeout'。每當鼠標移動時，只需使用'clearTimeout'並重置即可。 – PHPglue

-1

根據定義，你不能。

向後和向前按鈕是瀏覽器的功能，所以你不能用Javascript修改它。

你能雖然做的是每當用戶被鎖定有沒有辦法讓他離開鎖頁（如果已鎖定每一個頁面重定向到鎖定頁）

來源

2017-04-01 01:55:42 Plotisateur

是的你是對的。你能告訴我如何讓人無法離開鎖頁面（如果鎖定每一頁重定向到鎖頁面）。 –

我使用事件偵聽** onbeforeunload **，但頁面無法鎖定。你能給我一個提示嗎？ 'window.onbeforeunload = function（）{//}' –

忽略它的登錄的部分，因爲你應該使用AJAX發送到服務器並登錄通過SSL：

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

上面的代碼演示瞭如何使用10秒的定時器來實現這一目標。

來源

2017-04-01 03:07:21 PHPglue

如何完善鎖屏邏輯？

回答

相關問題