- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 jQuery idle timeout plugin by Eric Hynds
我的问题很简单,但我知道对此不会有任何简单的答案。
当网站仅在一个选项卡中打开时,该插件效果很好。我想要做的是当用户在任意数量的选项卡中打开网站时,它应该只有一个后台计时器,但信息消息应该显示在所有选项卡上。
考虑例如用户在 3 个不同的选项卡中打开网站,但仅主动使用一个选项卡(显然),因此目前插件检测到用户在该选项卡上处于非事件状态达指定时间并将其注销,这是不正确的,因为用户仍在积极使用其他选项卡.
我知道我必须在某处放置一些黑客,但真的不明白在哪里以及如何。如果有人已经这样做了,那真的会对我有很大帮助。也欢迎任何建议。请帮助伙计们。
最佳答案
我遇到过同样的问题!空闲计时器可以使用 localStorage 变量跨多个窗口和选项卡进行通信(保持同步)。大多数现代浏览器都支持此功能。在 github 上,marcuswestin/store.js 为旧浏览器提供了具有“回退”行为的良好功能。
这是一个 idleTimer 插件的“测试”代码,它提供了同步的窗口/选项卡(必须都在同一个域中)。它设置了 2 个 localStorage 变量来跟踪用户 session 的状态。
您可以在此处查看此代码的演示。打开多个窗口/选项卡并观察。
http://jillelaine.github.io/jquery-idleTimeout/
/**
* 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));
关于jquery-plugins - 在多个选项卡中同步 jQuery 空闲超时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23272960/
尝试熟悉 Maven 并参加在线类(class),但陷入困境......感谢提供的任何帮助。 我正在运行站点阶段,虽然它已完成并且我能够在浏览器中实际查看index.html,但我在此过程中遇到了很多
基本上就是标题。。我在任何地方都找不到一个简单的比较,来解释这两者之间的差异:。我知道Gradle中可以有3种类型的插件:。我认为这三种类型的插件在某种程度上与它们可以在settings.gradle
我是 maven 的初学者,现在我对这些 maven 插件之间的区别感到困惑。这些都是创建jar文件吗?现在我的问题是 各个插件创建的jar有什么区别。(组装插件、jar-plugin、shaded插
我使用 tycho-packaging-plugin 来设置 jar 的输出文件夹。这是我的 pom 的缩短版本: 0.21.0 org.eclipse.
When starting the server, refuses to load my plugin with an error:启动服务器时,拒绝加载我的插件,并出现错误: Could n
为什么卸载以下(空)插件会导致错误? 这是my-plugin/my-plugin.php : : my-plugin 关于wordpress - 由于错误 : Could not fully remo
我使用 sbt 与 playframework 和 activator 来构建一个 Web 应用程序。我的 sbt 版本是 0.13.0 我将plugin.sbt 文件更改为: logLevel :=
这是我运行 atlas-create-jira-plugin 时得到的结果后跟 atlas-create-jira-plugin-module选择选项1: Component Import . 问题是
我正在尝试使用 Maven 构建我的 Java 项目,但它失败了,并且出现以下错误: 从存储库 [local (C:\Users\Vinita.Gupta.m2\repository), centra
我正在使用 eclipse mars-2。我想在 Windows 中创建一个新的 Maven Spring Boot 项目。但我遇到了类似 的错误 Could not calculate build
最近开发的产品,我们是有四五个maven模块,开发阶段一直是在eclipse中运行的,然后快发版的时候,需要把这些项目打成jar包,通过命令去启动,那首先就得把这些模块项目打包,或者拷贝一些资源文件等
我想使用 maven-resources-plugin 复制 Excel 并使用 exec-maven-plugin 从该 Excel 创建一些属性文件。并且新创建的属性需要附加到构建中。我可以创建属
当我尝试构建项目时出现此错误。 Errors occurred during the build. Errors running builder 'Maven Project Builder' on
当我在执行 Maven 时从 eclipse 内部 -> 更新项目我遇到以下问题 Unable to update Maven configuration Could not calculate bu
我之前问过一个关于延迟处理事件的问题:Grails non time based queuing .我开始使用 rabbitmq 插件:http://grails.org/plugin/rabbitm
我正在尝试使用 maven 构建一个 java spring 项目(来自 heroku 入门指南的默认项目)。出于某种原因,我不断收到以下错误。机器上网应该没有问题。 Failed to execut
操作系统:OSX 10.11 Cordova :5.4.1(也尝试过 6.0)节点:4.2.6使用的cordova插件:crosswalk-project/cordova-plugin-crosswa
org.sonatype.maven.plugin :emma-maven-plugin:1.2 org.codehaus.mojo :emma-maven-plugin:1.0-alpha-3 or
我正在管理安装了很多插件的多个 shopware 6 商店。后端只允许更新一个插件,这非常耗时,因为更新分两步完成: 更新已加载(加载器圈) 后端已重新加载(html 重新加载) 为什么没有“更新所有
我正在管理安装了很多插件的多个 shopware 6 商店。后端只允许更新一个插件,这非常耗时,因为更新分两步完成: 更新已加载(加载器圈) 后端已重新加载(html 重新加载) 为什么没有“更新所有
我是一名优秀的程序员,十分优秀!