jQuery 頁面timeout提示與轉址
測試頁30秒後出現timeout提示，按"Stay Logged In"則繼續保留頁面，等待按"Stay Logged In"的時間為10秒鐘，否則自動導至登入頁面。
使用iQuery的Dialog UI。
下載sample (已打包jQuery Dialog UL)
test1.aspx
<%@ Page Language="C#" Debug="true"%>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="jquery-idleTimeout.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$( "#modal" ).dialog({
autoOpen: false,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(document).idleTimeout({
inactivity: 30000,
noconfirm: 10000,
sessionAlive: 10000
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>Timeout測試頁</h1>
30秒後出現timeout提示，按保持頁面則繼續保留頁面，等待按保留頁面時間為10秒鐘，否則導入登入頁面。
<div id="modal" title="警示">
</div>
</form>
</body>
</html>
jquery-idleTimeout.js
//######
//## This work is licensed under the Creative Commons Attribution-Share Alike 3.0
//## United States License. To view a copy of this license,
//## visit http://creativecommons.org/licenses/by-sa/3.0/us/ or send a letter
//## to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
//######
(function($){
$.fn.idleTimeout = function(options) {
var defaults = {
inactivity: 1200000, //20 Minutes
noconfirm: 10000, //10 Seconds
sessionAlive: 30000, //10 Minutes
redirect_url: 'login.html',
click_reset: true,
alive_url: 'login.html',
logout_url: 'login.html'
}
//##############################
//## Private Variables
//##############################
var opts = $.extend(defaults, options);
var liveTimeout, confTimeout, sessionTimeout;
var modal = "<div id='modal_pop'><p>You are about to be signed out due to inactivity.</p></div>";
//##############################
//## Private Functions
//##############################
var start_liveTimeout = function()
{
clearTimeout(liveTimeout);
clearTimeout(confTimeout);
liveTimeout = setTimeout(logout, opts.inactivity);
if(opts.sessionAlive)
{
clearTimeout(sessionTimeout);
sessionTimeout = setTimeout(keep_session, opts.sessionAlive);
}
}
var logout = function()
{
confTimeout = setTimeout(redirect, opts.noconfirm);
$(modal).dialog({
buttons: {"Stay Logged In": function(){
$(this).dialog('close');
stay_logged_in();
}},
modal: true,
title: 'Auto Logout'
});
}
var redirect = function()
{
if(opts.logout_url)
{
$.get(opts.logout_url);
}
window.location.href = opts.redirect_url;
}
var stay_logged_in = function(el)
{
start_liveTimeout();
if(opts.alive_url)
{
$.get(opts.alive_url);
}
}
var keep_session = function()
{
$.get(opts.alive_url);
clearTimeout(sessionTimeout);
sessionTimeout = setTimeout(keep_session, opts.sessionAlive);
}
//###############################
//Build & Return the instance of the item as a plugin
// This is basically your construct.
//###############################
return this.each(function() {
obj = $(this);
start_liveTimeout();
if(opts.click_reset)
{
$(document).bind('click', start_liveTimeout);
}
if(opts.sessionAlive)
{
keep_session();
}
});
};
})(jQuery);
留言列表
