Question

我编写了一个脚本，用于检测javascript中的空闲时间，并在30分钟不活动后注销用户。脚本运行正常。但是，如果用户打开新标签页中的任何页面并且正在处理该页面，那么失败的一件事就是它。上一个选项卡上的脚本仍将运行，并将用户从两个选项卡中注销。什么可能的解决方案来保持Tabs之间的空闲时间检测。

var time = new Date().getTime();
                $(document.body).bind("mousemove keypress", function(e) {
                    time = new Date().getTime();
                });

     function refresh() {
         if(new Date().getTime() - time >= 6000) {
             $('#edit-quote-details').modal('show');
         clock = $('.clock').FlipClock(61,{
                clockFace: 'MinuteCounter',
                countdown: true,
                callbacks: {
                    stop: function() {
                        window.location.href='../logout.action';
                    }
                }
            });
         }
         else {
             setTimeout(refresh, 10000);
         }
     }

     setTimeout(refresh, 10000); 


     function refresh() {
         if(new Date().getTime() - time >= 6000) {
             $('#edit-quote-details').modal('show');
         clock = $('.clock').FlipClock(61,{
                clockFace: 'MinuteCounter',
                countdown: true,
                callbacks: {
                    stop: function() {
                        window.location.href='../logout.action';
                    }
                }
            });
         }
         else {
             setTimeout(refresh, 10000);
         }
     }

     setTimeout(refresh, 10000);

Answer 1

对于旧版浏览器，我会使用Observer模式跨标签进行通信（只要标签已由普通父母打开）。

如果HTML5是一个选项（即：仅限现代浏览器），您可以使用本地存储。如果你走这条路，我会从Mozilla探索当地的牧草，因为那可能是旧浏览器的垫片。

如果你想要一个跨浏览器的解决方案，你需要使用服务器来跟踪它。

更新：您还可以使用跨文档消息在不同域中的文档之间发布消息。

API文档：https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage 示例：http://html5demos.com/postmessage2

Answer 2

我想在我的客户网站上实现此功能。没有在网上找到任何闲置的解决方案。最后我不得不把我的代码弄糟，想一些逻辑并实现它。代码如下 -

     `/*Put this code inside script tag whereever you want to execute the inactivity popup*/
     var t;
    //set the timeout period  
    var timeoutPeriod = '${inactiveIntervalMillis}';  
    //detect various events  
    callUserEvents();  
     `

//remove the logged Out storage after popup is closed by user  
function removeLocalStorage() {  
localStorage.removeItem("loggedOut");  
}      
//call this function whenever we detect user activity  
function resetUserActivity() {  
resetTimer();  
}  
//If the user is logged out and it clicks on other tabs,the popup will be               displayed there too  
function checkIfUserLoggedOut() {  
    if (localStorage.getItem("loggedOut")) {  
        loadLoginModal("/includes/gadgets/popup-content.jsp", 400, 230,  
            undefined);  
    }  
}  

// Call this method when any window onloads,this helps to check if multiple         tabs are opened by same site  
function incrementCounter() {   
    checkIfUserLoggedOut();  
    if (localStorage.getItem("counter") == "NaN") {  
        localStorage.setItem("counter", "0");  
    } else {  
        var counter = parseInt(localStorage.getItem("counter")) + 1;  
        localStorage.setItem("counter", counter);  
    }  
    resetTimer();  
}  
//after time interval,this method will be called  
function handleIdleTimedOut() {  
//get the current localStorage Object  
    window.sharedCounter = localStorage.getItem("counter");  
//If no tabs are opened,then popup will be shown here.  
    if (window.localCounter == window.sharedCounter) {  
        loadLoginModal("/includes/gadgets/popup-content.jsp", 400,               230,undefined);  
        localStorage.setItem("loggedOut", "true");  
    }   
}  

function resetTimer() {  
//save counterin current Window object,and after timeout period you can     match   it,if by chance multiple tabs were opened,the counter will be     different,popup  wont be shown in current window at incorrect time.  
    window.localCounter = localStorage.getItem("counter");  
    clearTimeout(t);  
    t = setTimeout(handleIdleTimedOut, timeoutPeriod);  
}  
function callUserEvents(){  
window.onload=incrementCounter  
window.onscroll = resetUserActivity;  
window.onmousemove = resetUserActivity;    
window.ondblclick = resetUserActivity;  
window.oncontextmenu = resetUserActivity;  
window.onclick = resetUserActivity;  
window.onkeypress = resetUserActivity;  
window.onpageshow = resetUserActivity;  
window.onresize = resetUserActivity;  
window.onfocus = incrementCounter;  
window.ondrag = resetUserActivity;  
window.oncopy = resetUserActivity;  
window.oncut = resetUserActivity;  
window.onpaste = resetUserActivity;     
}  

`

在Tabs中检测JavaScript中的空闲时间？

2 个答案: