起初项目中session过期的时候需要做一个提示框(并不进行过期跳转到指定页面,在点击确定的时候才会执行跳转),告诉用户session已经过期了,具体实现在本文的最后,一下是common-popup.js,和common-popup.css的代码:
/**
* This is common popup/dialog/tips plugin of jquery.
*
* @author lgscofield
*
* 2013-4-15
*/
/**
* private function, but you also can invoking it.
*
* @param {Object} title
* @param {Object} string
* @param {Object} args
* @param {Object} callback
* @memberOf {TypeName}
*/
function apprise(title, string, args, callback){
var default_args = {
'confirm': false, // Ok and Cancel buttons
'verify': false, // Yes and No buttons
'input': false, // Text input (can be true or string for default text)
'textarea': false,// Text Area (can be true or string for default text)
'animate': false, // Groovy animation (can true or number, default is 400)
'textOk': 'Ok', // Ok button default text
'textCancel': 'Cancel', // Cancel button default text
'textYes': 'Yes', // Yes button default text
'textNo': 'No' // No button default text
};
if (args) {
for (var index in default_args) {
if (typeof args[index] == "undefined")
args[index] = default_args[index];
}
}
var aHeight = $(document).height();
var aWidth = $(document).width();
$('body').append('<div class="appriseOverlay" id="aOverlay"></div>');
$('.appriseOverlay').css('height', aHeight).css('width', aWidth).fadeIn(100);
$('body').append('<div class="appriseOuter"></div>');
$('.appriseOuter').append('<div class="appriseTitle"></div>');
$('.appriseTitle').append(title);
$('.appriseOuter').append('<div class="appriseInner"></div>');
$('.appriseInner').append(string);
$('.appriseOuter').css("left", ($(window).width() - $('.appriseOuter').width()) / 2 + $(window).scrollLeft() + "px");
if (args) {
if (args['animate']) {
var aniSpeed = args['animate'];
if (isNaN(aniSpeed)) {
aniSpeed = 400;
}
$('.appriseOuter').css('top', '-200px').show().animate({
top: "150px"
}, aniSpeed);
}
else {
$('.appriseOuter').css('top', '150px').fadeIn(200);
}
}
else {
$('.appriseOuter').css('top', '150px').fadeIn(200);
}
if (args) {
if (args['input']) {
if (typeof(args['input']) == 'string') {
$('.appriseInner').append('<div class="aInput"><input type="text" class="aTextbox" t="aTextbox" value="' + args['input'] + '" /></div>');
}
else {
$('.appriseInner').append('<div class="aInput"><input type="text" class="aTextbox" t="aTextbox" /></div>');
}
$('.aTextbox').focus();
}
if (args['textarea']) {
if (typeof(args['textarea']) == 'string') {
$('.appriseInner').append('<div class="aTextarea"><textarea type="text" class="aTextArea" t="aTextArea" value="' + args['textarea'] + '" /></div>');
}
else {
$('.appriseInner').append('<div class="aTextarea"><textarea type="text" class="aTextArea" t="aTextArea" /></div>');
}
$('.aTextArea').focus();
}
}
$('.appriseInner').append('<div class="aButtons"></div>');
if (args) {
if (args['confirm'] || args['input']) {
$('.aButtons').append('<button value="ok">' + args['textOk'] + '</button>');
$('.aButtons').append('<button value="cancel">' + args['textCancel'] + '</button>');
}
else if (args['verify']) {
$('.aButtons').append('<button value="ok">' + args['textYes'] + '</button>');
$('.aButtons').append('<button value="cancel">' + args['textNo'] + '</button>');
}
else {
$('.aButtons').append('<button value="ok">' + args['textOk'] + '</button>');
}
}
else {
$('.aButtons').append('<button value="ok">Ok</button>');
}
$(document).keydown(function(e){
if ($('.appriseOverlay').is(':visible')) {
// whitespace forbidden.
if (!(args['textarea'] || args['input'])) {
if (e.keyCode == 13) {
$('.aButtons > button[value="ok"]').click();
}
if (e.keyCode == 27) {
$('.aButtons > button[value="cancel"]').click();
}
if (event.keyCode == 32) {
event.returnValue = false;
return false;
}
}
}
});
var aText = $('.aTextbox').val();
if (!aText) {
aText = false;
}
$('.aTextbox').keyup(function(){
aText = $(this).val();
});
var areaText = $('.aTextArea').val();
if (!areaText) {
areaText = false;
}
$('.aTextArea').keyup(function(){
areaText = $(this).val();
$('.error').hide();
});
$('.aButtons > button').click(function(){
if (args['textarea'] && !areaText && $(this).attr("value") != 'cancel') {
if($('div').hasClass('error')) {
return;
}
$('.aButtons').before('<div class="error"></div>');
$('.error').append('<p class="perror">Please fill out the content effectively!</p>');
}
else {
$('.appriseOverlay').remove();
$('.appriseOuter').remove();
}
if (callback) {
var wButton = $(this).attr("value");
if (wButton == 'ok') {
if (args) {
if (args['input']) {
callback(aText);
}
else if (args['textarea']) {
callback(areaText);
}
else {
callback(true);
}
}
else {
callback(true);
}
}
else if (wButton == 'cancel') {
callback(false);
}
}
});
}
/**
* Browser key event
* @param {Object} evt
*/
function prDefault(evt){
if ($.browser.msie) {
evt.keyCode = 0;
evt.returnValue = false;
}
else {
evt.preventDefault();
}
}
/**
* This is common popup/dialog/tips plugin of jquery.
*
* @author lgscofield
*
* 2013-4-15
*/
.appriseOverlay {
/**position:fixed;
top:0;
left:0;
background:rgba(0, 0, 0, 0.3);
display:none;
background: #000;**/
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
/**filter: alpha(opacity=70);
opacity: 0.7;
-moz-opacity:0.7;**/
/**background:rgba(0, 0, 0, 0.3); background:#000\0; filter:alpha(opacity=30);**/
/*background: #aaaaaa url(css/flick/images/ui-bg_flat_0_aaaaaa_40x100.png)
50% 50% repeat-x;*/
background-color: #000;
filter: Alpha(Opacity = 30) !important /*{opacityFilterOverlay}*/;
opacity: 0.3 /*{opacityOverlay}*/;
}
.appriseOuter {
background: #eee;
border: 1px solid #fff;
box-shadow: 0px 3px 7px #333;
-moz-box-shadow: 0px 3px 7px #333;
-webkit-box-shadow: 0px 3px 7px #333;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-khtml-border-radius: 4px;
position: absolute;
z-index: 99999999;
min-width: 200px;
min-height: 50px;
max-width: 75%;
position: fixed;
display: none;
}
.appriseTitle {
height: 20px;
color: #333;
font-weight: bolder;
vertical-align: middle !important;
text-shadow: 0px 1px 0px #fff;
border: 1px solid #ddd;
padding: 5px;
}
.appriseInner {
padding: 20px;
color: #333;
background-color: #fff !important;
text-shadow: 0px 1px 0px #fff;
}
.appriseInner button {
border: 1px solid #bbb;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-khtml-border-radius: 3px;
background: -moz-linear-gradient(100% 100% 90deg, #eee, #d5d5d5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee),
to(#d5d5d5) );
background: -webkit-linear-gradient(#eee, #d5d5d5);
background: -o-linear-gradient(#eee, #d5d5d5);
color: #232d3d;
font-size: 12px;
font-weight: bold;
padding: 4px 10px;
margin: 0 3px;
text-shadow: 0px 1px 0px #fff;
cursor: pointer;
box-shadow: 0px 1px 2px #ccc;
-moz-box-shadow: 0px 1px 2px #ccc;
-webkit-box-shadow: 0px 1px 2px #ccc;
}
.appriseInner button:hover {
color: #d85054;
}
.aButtons,.aInput {
margin: 20px 10px 0px 10px;
text-align: center;
}
.aTextarea {
margin: 20px 0px 0px 0px;
text-align: center;
}
.aTextbox {
border: 1px solid #aaa;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-khtml-border-radius: 4px;
box-shadow: 0px 1px 0px #fff;
-moz-box-shadow: 0px 1px 0px #fff;
-webkit-box-shadow: 0px 1px 0px #fff;
width: 180px;
font-size: 12px;
font-weight: bold;
padding: 5px 10px;
}
.aTextArea {
border: 1px solid #aaa;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-khtml-border-radius: 4px;
box-shadow: 0px 1px 0px #fff;
-moz-box-shadow: 0px 1px 0px #fff;
-webkit-box-shadow: 0px 1px 0px #fff;
width: 250px;
max-width: 250px;
height: 78px;
max-height: 78px;
font-size: 12px;
font-weight: bold;
padding: 5px 10px;
font-size: 12px;
}
.error{
border: 1px solid #D5D5D5;
/**background-color: #DDDDDD;**/
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-khtml-border-radius: 4px;
box-shadow: 0px 1px 0px #fff;
-moz-box-shadow: 0px 1px 0px #fff;
-webkit-box-shadow: 0px 1px 0px #fff;
background-color: #eedc94;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
background-image: -o-linear-gradient(top, #fceec1, #eedc94);
background-image: linear-gradient(top, #fceec1, #eedc94);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #eedc94 #eedc94 #e4c652;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border-width: 1px;
border-style: solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.perror{
margin: 1px 10px;
}
最后,在做一系列操作前判断session是否过期,其实就是使用了setTimeout,一下是具体实现:
var $$ = function(func){
if (document.addEventListener) {
window.addEventListener("load", func, false);
}
else if (document.attachEvent) {
window.attachEvent("onload", func);
}
};
$$(function(){
var inactiveTimes = '<%=session.getMaxInactiveInterval()%>';
if(inactiveTimes != null && inactiveTimes != '') {
expireTime = inactiveTimes * 1000;
}
else {
expireTime = 600 * 1000;
}
window.setTimeout(sessionTips, expireTime);
$("input[type='button'], a").ajaxStart(function () {
if(window.console && console.log) {
console.log('ajax start', expireTime);
}
clearTimeout(sessionTips);
});
$("input[type='button'], ad").ajaxStop(function () {
if(window.console && console.log) {
console.log('ajax end', expireTime);
}
window.setTimeout(sessionTips, expireTime);
});
});
function sessionTips() {
if(window.console && console.log) {
console.log('session expired.');
}
$('a, img, input, textarea, #xpMenuCont tr td, button, th').attr('onclick', '').unbind('click').bind('click', function(){
popupWin(expireMes);
return false;
});
$('select').mouseover(function(){
$(this).find('option').attr('disabled', 'disabled').hide();
}).click(function(){
popupWin(expireMes);
return false;
});
}
/**
* popup the dialog/window
* @param {Object} sess
*/
function popupWin(sess){
apprise('Warm prompt!', sess, {
'confirm': true,
'textOk': 'Yes',
'textCancle': 'No'
}, function(to){
if (to) {
// parent.location.reload();
window.location.reload();
}
});
}
PS: 上述代码中popupWin(sess)是调用common-popup.js插件中的apprise函数.具体的API会在以后完善之后整理出来.
调用的时候只要在<script>...</script>标记中插入上面那段代码即可,这就是所谓的主动式session过期提示.上面这段代码中使用了ajaxStart和ajaxStop函数,其主要目的是在做ajax操作时重置计时函数而已.简单吧...