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);
|
參考 http://philpalmieri.com/2009/09/jquery-session-auto-timeout-with-prompt/
- inactivity: 1200000 //20 Minute
default (how long before showing the notice)
- sessionAlive: 300000, //5 minutes
default how often to hit alive_url, we use for our ajax interfaces where
the page doesn’t change very often. This helps to prevent the logout
screen of your app appearing in ajax callbacks. If you set this to false
it won’t send off.
- alive_url:
‘/path/to/your/imHere/url’, //send alive ping to this url
- redirect_url: ‘/js_sandbox/’, //Where
to go when log out
- click_reset: true, //Reset timeout on
clicks (for ajax interface) – resets the sessionAlive timer, so we are
not hitting up your app with alive_url if we just did an ajax call for
another reason.
- logout_url:
‘/js_sandbox/timedLogout/index.html’ //logout before redirect (url so
you can completely destroy the session before redirecting to login
screen)
|
