Jquery plugins jquery空闲超时插件多标签浏览
我一直在尝试集成jquery idle timeout插件,以便在用户空闲一段时间时显示会话超时弹出警告 除浏览器的新选项卡外,所有功能都正常工作。当我移动到新选项卡或其他选项卡,或者有任何帖子返回时,会话将变为活动状态,并为该特定选项卡重新设置计时器,但不会为其他选项卡或页面重新设置计时器 请看一下下面的代码Jquery plugins jquery空闲超时插件多标签浏览,jquery-plugins,Jquery Plugins,我一直在尝试集成jquery idle timeout插件,以便在用户空闲一段时间时显示会话超时弹出警告 除浏览器的新选项卡外,所有功能都正常工作。当我移动到新选项卡或其他选项卡,或者有任何帖子返回时,会话将变为活动状态,并为该特定选项卡重新设置计时器,但不会为其他选项卡或页面重新设置计时器 请看一下下面的代码 <script type="text/javascript"> var idleTime = 12000; // number of miliseconds
<script type="text/javascript">
var idleTime = 12000; // number of miliseconds until the user is considered idle
var initialSessionTimeoutMessage = 'Your session will expire in <span id="sessionTimeoutCountdown"></span> seconds.<br/><br />Click on <b>OK</b> to continue your session.';
var sessionTimeoutCountdownId = 'sessionTimeoutCountdown';
var redirectAfter = 10; // number of seconds to wait before redirecting the user
var path = getPath();
var redirectTo = "logout.aspx";
var keepAliveURL = 'Default.aspx'; // URL to call to keep the session alive
var expiredMessage = 'Your session has expired. You are being logged out for security reasons.'; // message to show user when the countdown reaches 0
var running = false; // var to check if the countdown is running
var timer; // reference to the setInterval timer so it can be stopped
$(document).ready(function () {
var path = window.location.pathname;
var file = path.split('/')[1];
if (file == 'Login.aspx') {
return;
}
// create the warning window and set autoOpen to false
var sessionTimeoutWarningDialog = $("#sessionTimeoutWarning");
$(sessionTimeoutWarningDialog).html(initialSessionTimeoutMessage);
$(sessionTimeoutWarningDialog).dialog({
title: 'Session Expiration Warning',
autoOpen: false, // set this to false so we can manually open it
closeOnEscape: false,
draggable: false,
width: 460,
minHeight: 50,
modal: true,
beforeclose: function () { // bind to beforeclose so if the user clicks on the "X" or escape to close the dialog, it will work too
// stop the timer
clearInterval(timer);
// stop countdown
running = false;
// ajax call to keep the server-side session alive
$.ajax({
url: keepAliveURL,
async: true
});
},
buttons: {
OK: function () {
// close dialog
$(this).dialog('close');
}
},
resizable: false,
open: function () {
// scrollbar fix for IE
$('body').css('overflow', 'hidden');
},
close: function () {
// reset overflow
$('body').css('overflow', 'auto');
}
}); // end of dialog
// start the idle timer
$.idleTimer(idleTime);
// bind to idleTimer's idle.idleTimer event
$(document).bind("idle.idleTimer", function () {
// if the user is idle and a countdown isn't already running
if ($.data(document, 'idleTimer') === 'idle' && !running) {
var counter = redirectAfter;
running = true;
// intialisze timer
$('#' + sessionTimeoutCountdownId).html(redirectAfter);
// open dialog
$(sessionTimeoutWarningDialog).dialog('open');
// create a timer that runs every second
timer = setInterval(function () {
counter -= 1;
// if the counter is 0, redirect the user
if (counter == 0) {
$(sessionTimeoutWarningDialog).html(expiredMessage);
$(sessionTimeoutWarningDialog).dialog('disable');
window.location = redirectTo;
} else {
$('#' + sessionTimeoutCountdownId).html(counter);
};
}, 1000);
};
});
});
</script>
var idleTime=12000;//用户被视为空闲之前的毫秒数
var initialSessionTimeoutMessage='您的会话将在几秒钟后过期。
单击“确定”继续会话。';
var sessionTimeoutCountdownId='sessionTimeoutCountdown';
var redirectAfter=10;//重定向用户之前等待的秒数
var path=getPath();
var redirectTo=“logout.aspx”;
var keepAliveURL='Default.aspx';//要调用以保持会话活动的URL
var expiredMessage='您的会话已过期。出于安全原因,您正在注销。“;//当倒计时达到0时显示给用户的消息
var running=false;//var检查倒计时是否正在运行
变量计时器;//参考setInterval定时器,使其停止
$(文档).ready(函数(){
var path=window.location.pathname;
var file=path.split('/')[1];
如果(文件=='Login.aspx'){
返回;
}
//创建警告窗口并将autoOpen设置为false
var sessionTimeoutWarningDialog=$(“#sessionTimeoutWarning”);
$(sessionTimeoutWarningDialog).html(initialSessionTimeoutMessage);
$(sessionTimeoutWarningDialog).dialog({
标题:“会话过期警告”,
autoOpen:false,//将其设置为false,以便手动打开它
closeOnEscape:错误,
可拖动:错误,
宽度:460,
身高:50,
莫代尔:是的,
beforeclose:function(){//绑定到beforeclose,因此如果用户单击“X”或escape关闭对话框,它也会工作
//停止计时
清除间隔(计时器);
//停止倒计时
运行=错误;
//保持服务器端会话活动的ajax调用
$.ajax({
url:keepAliveURL,
异步:true
});
},
按钮:{
OK:函数(){
//关闭对话框
$(this.dialog('close');
}
},
可调整大小:false,
打开:函数(){
//IE的滚动条修复
$('body').css('overflow','hidden');
},
关闭:函数(){
//重置溢出
$('body').css('overflow','auto');
}
});//对话框结束
//启动怠速定时器
$.idleTimer(idleTime);
//绑定到idleTimer的idle.idleTimer事件
$(document).bind(“idle.idleTimer”,函数(){
//如果用户空闲且尚未运行倒计时
if($.data(文档'idleTimer')=='idle'&&&!正在运行){
var计数器=重新定向后;
运行=真;
//初始化计时器
$('#'+sessionTimeoutCountdownId).html(重定向后);
//打开对话框
$(sessionTimeoutWarningDialog).dialog('打开');
//创建每秒运行的计时器
定时器=设置间隔(函数(){
计数器-=1;
//如果计数器为0,则重定向用户
如果(计数器==0){
$(sessionTimeoutWarningDialog).html(expiredMessage);
$(sessionTimeoutWarningDialog.dialog('disable');
window.location=重定向到;
}否则{
$('#'+sessionTimeoutCountdownId).html(计数器);
};
}, 1000);
};
});
});
请告诉我如何使其他选项卡的功能正常(同步所有页面的计时器)
谢谢我明白你的意思,使用jQuery的空闲超时插件只是识别超时,它没有与多个选项卡或窗口选项集成。但你可以用下面这种巧妙的方法来实现
jQuery(window).blur(function(){
//your code here to stop the finding idle time check
});
jQuery(window).focus(function(){
//your code here to start idle time check
});
请参阅:您的空闲计时器可以使用本地存储变量跨多个窗口和选项卡进行通信(保持同步)。在github上,marcuswestin/store.js提供了多种浏览器的良好功能。请注意,有些浏览器/设备不支持本地存储,但大多数现代浏览器支持本地存储 下面是idleTimer插件的“测试”代码,该插件提供同步的窗口和选项卡,前提是它们都在同一个域中。它设置了两个本地存储变量idleTimerLastActivity和idleTimerLoggedOut来跟踪用户会话的“状态” 演示页面。打开多个窗口/选项卡,您可以看到它是如何工作的。
/**
*这部作品是根据麻省理工学院许可证授权的
*
*jQuery的可配置空闲(无活动)计时器和注销重定向。
*跨同一域的多个窗口、选项卡和iFrame工作。
*
*依赖项:jqueryv1.7+、jqueryui、store.js fromhttps://github.com/marcuswestin/store.js -v1.3.4+
*
*注释并记录控制台,以便使用Firefox和Firebug或类似工具进行调试
*版本1.0.6
**/
/*全局jQuery:false,文档:false,存储:false,clearInterval:false,setInterval:false,setTimeout:false,窗口:false,警报:false,控制台:false*/
/*jslint缩进:2,sloppy:true,plusplus:true*/
(函数($){
$.fn.idleTimeout=函数(选项){
console.log('start');
//##############################
//##骗局
/**
* This work is licensed under the MIT License
*
* Configurable idle (no activity) timer and logout redirect for jQuery.
* Works across multiple windows, tabs and iframes from the same domain.
*
* Dependencies: JQuery v1.7+, JQuery UI, store.js from https://github.com/marcuswestin/store.js - v1.3.4+
*
* Commented and console logged for debugging with Firefox & Firebug or similar
* version 1.0.6
**/
/*global jQuery: false, document: false, store: false, clearInterval: false, setInterval: false, setTimeout: false, window: false, alert: false, console: false*/
/*jslint indent: 2, sloppy: true, plusplus: true*/
(function ($) {
$.fn.idleTimeout = function (options) {
console.log('start');
//##############################
//## Configuration Variables
//##############################
var defaults = {
idleTimeLimit: 30000, // 30 seconds for testing. 'No activity' time limit in milliseconds. 1200000 = 20 Minutes
dialogDisplayLimit: 20000, // 20 seconds for testing. Time to display the warning dialog before redirect (and optional callback) in milliseconds. 180000 = 3 Minutes
redirectUrl: '/logout', // redirect to this url on timeout logout. Set to "redirectUrl: false" to disable redirect
// optional custom callback to perform before redirect
customCallback: false, // set to false for no customCallback
// customCallback: function () { // define optional custom js function
// perform custom action before logout
// },
// configure which activity events to detect
// http://www.quirksmode.org/dom/events/
// https://developer.mozilla.org/en-US/docs/Web/Reference/Events
activityEvents: 'click keypress scroll wheel mousewheel', // separate each event with a space
//dialog box configuration
dialogTitle: 'Session Expiration Warning',
dialogText: 'Because you have been inactive, your session is about to expire.',
// server-side session keep-alive timer
sessionKeepAliveTimer: 600000 // Ping the server at this interval in milliseconds. 600000 = 10 Minutes
// sessionKeepAliveTimer: false // Set to false to disable pings
},
//##############################
//## Private Variables
//##############################
opts = $.extend(defaults, options),
checkHeartbeat = 2000, // frequency to check for timeouts - 2000 = 2 seconds
origTitle = document.title, // save original browser title
sessionKeepAliveUrl = window.location.href, // set URL to ping to user's current window
keepSessionAlive, activityDetector,
idleTimer, remainingTimer, checkIdleTimeout, idleTimerLastActivity, startIdleTimer, stopIdleTimer,
openWarningDialog, dialogTimer, checkDialogTimeout, startDialogTimer, stopDialogTimer, isDialogOpen, destroyWarningDialog,
countdownDisplay, logoutUser,
checkForIframes, includeIframes, attachEventIframe; // iframe functionality
//##############################
//## Private Functions
//##############################
keepSessionAlive = function () {
if (opts.sessionKeepAliveTimer) {
var keepSession = function () {
if (idleTimerLastActivity === store.get('idleTimerLastActivity')) {
console.log('keep session alive function');
$.get(sessionKeepAliveUrl);
}
};
setInterval(keepSession, opts.sessionKeepAliveTimer);
}
};
activityDetector = function () {
$('body').on(opts.activityEvents, function () {
if (isDialogOpen() !== true) {
console.log('activity detected');
startIdleTimer();
} else {
console.log('dialog open. activity ignored');
}
});
};
checkIdleTimeout = function () {
var timeNow = $.now(), timeIdleTimeout = (store.get('idleTimerLastActivity') + opts.idleTimeLimit);
if (timeNow > timeIdleTimeout) {
console.log('timeNow: ' + timeNow + ' > idle ' + timeIdleTimeout);
if (isDialogOpen() !== true) {
console.log('dialog is not open & will be opened');
openWarningDialog();
startDialogTimer();
}
} else if (store.get('idleTimerLoggedOut') === true) { //a 'manual' user logout?
logoutUser();
} else {
console.log('idle not yet timed out');
if (isDialogOpen() === true) {
console.log('dialog is open & will be closed');
destroyWarningDialog();
stopDialogTimer();
}
}
};
startIdleTimer = function () {
stopIdleTimer();
idleTimerLastActivity = $.now();
store.set('idleTimerLastActivity', idleTimerLastActivity);
console.log('start idle timer: ' + idleTimerLastActivity);
idleTimer = setInterval(checkIdleTimeout, checkHeartbeat);
};
stopIdleTimer = function () {
clearInterval(idleTimer);
};
openWarningDialog = function () {
var dialogContent = "<div id='idletimer_warning_dialog'><p>" + opts.dialogText + "</p><p style='display:inline'>Time remaining: <div style='display:inline' id='countdownDisplay'></div></p></div>";
$(dialogContent).dialog({
buttons: {
"Stay Logged In": function () {
console.log('Stay Logged In button clicked');
destroyWarningDialog();
stopDialogTimer();
startIdleTimer();
},
"Log Out Now": function () {
console.log('Log Out Now button clicked');
logoutUser();
}
},
closeOnEscape: false,
modal: true,
title: opts.dialogTitle
});
// hide the dialog's upper right corner "x" close button
$('.ui-dialog-titlebar-close').css('display', 'none');
// start the countdown display
countdownDisplay();
// change title bar to warning message
document.title = opts.dialogTitle;
};
checkDialogTimeout = function () {
var timeNow = $.now(), timeDialogTimeout = (store.get('idleTimerLastActivity') + opts.idleTimeLimit + opts.dialogDisplayLimit);
if ((timeNow > timeDialogTimeout) || (store.get('idleTimerLoggedOut') === true)) {
console.log('timeNow: ' + timeNow + ' > dialog' + timeDialogTimeout);
logoutUser();
} else {
console.log('dialog not yet timed out');
}
};
startDialogTimer = function () {
dialogTimer = setInterval(checkDialogTimeout, checkHeartbeat);
};
stopDialogTimer = function () {
clearInterval(dialogTimer);
clearInterval(remainingTimer);
};
isDialogOpen = function () {
var dialogOpen = $("#idletimer_warning_dialog").is(":visible");
if (dialogOpen === true) {
return true;
}
return false;
};
destroyWarningDialog = function () {
console.log('dialog destroyed');
$(".ui-dialog-content").dialog('destroy').remove();
document.title = origTitle;
};
// display remaining time on warning dialog
countdownDisplay = function () {
var dialogDisplaySeconds = opts.dialogDisplayLimit / 1000, mins, secs;
remainingTimer = setInterval(function () {
mins = Math.floor(dialogDisplaySeconds / 60); // minutes
if (mins < 10) { mins = '0' + mins; }
secs = dialogDisplaySeconds - (mins * 60); // seconds
if (secs < 10) { secs = '0' + secs; }
$('#countdownDisplay').html(mins + ':' + secs);
dialogDisplaySeconds -= 1;
}, 1000);
};
logoutUser = function () {
console.log('logout function');
store.set('idleTimerLoggedOut', true);
if (opts.customCallback) {
console.log('logout function custom callback');
opts.customCallback();
}
if (opts.redirectUrl) {
console.log('logout function redirect to URL');
window.location.href = opts.redirectUrl;
}
};
// document must be in readyState 'complete' before looking for iframes
checkForIframes = function () {
var docReadyCheck, isDocReady;
docReadyCheck = function () {
if (document.readyState === "complete") {
console.log('check for iframes, now that the document is complete');
clearInterval(isDocReady);
includeIframes();
}
};
isDocReady = setInterval(docReadyCheck, 1000);
};
// look for iframes
includeIframes = function () {
console.log('include iframes start');
var foundIframes = document.getElementsByTagName('iframe'), index, iframeItem;
if (foundIframes.length > 0) { //at least one iframe found
console.log('iframes found: ' + foundIframes.length);
// attach events to each iframe found
for (index = 0; index < foundIframes.length; index++) {
iframeItem = foundIframes.item(index);
if (iframeItem.attachEvent) { // IE < 11. Returns a boolean true/false
console.log('attach event to iframe. Browser IE < 11');
iframeItem.attachEvent('onload', attachEventIframe(index));
} else { // IE >= 11 and FF, etc.
console.log('attach event to iframe. Browser NOT IE < 11');
iframeItem.addEventListener('load', attachEventIframe(index), false);
}
} // end for loop
} // end if any iframes
};
// attach events to each iframe
attachEventIframe = function (index) {
var iframe = $('iframe:eq(' + index + ')').contents().find('html');
iframe.on(opts.activityEvents, function (event) {
console.log('bubbling iframe activity event to body of page');
$('body').trigger(event);
});
};
//###############################
// Build & Return the instance of the item as a plugin
// This is your construct.
//###############################
return this.each(function () {
if (store.enabled) {
idleTimerLastActivity = $.now();
store.set('idleTimerLastActivity', idleTimerLastActivity);
store.set('idleTimerLoggedOut', false);
} else {
alert('Please disable "Private Mode", or upgrade to a modern browser. Or perhaps a dependent file missing. Please see: https://github.com/marcuswestin/store.js');
}
activityDetector();
keepSessionAlive();
startIdleTimer();
checkForIframes();
});
};
}(jQuery));