Javascript书签/iFrame自动刷新加载页面，如果在设定的时间框架内没有检测到任何活动？

Question

我有一个基于浏览器的应用程序，我在工作中使用(因为实际上所有的公司应用程序现在都是基于浏览器的明显原因)，有一个恼人的短会话超时。我不确定会话超时设置为什么，但大约在5-10分钟之间。

不可避免的是，每当我不得不使用它时，会话已经超时，我将信息输入应用程序，提交它，然后页面加载一个全新的会话，而没有任何信息实际上被传递--我得到的只是一个新的会话。然后，我必须重新输入信息，并再次提交，以便让它实际拉出我想要的东西。当然，我可以先刷新页面，然后输入信息，但我从来不知道会话是否超时，有时它运行得非常缓慢，所以这是浪费时间。我们的开发团队无法预见这样的小事情不仅令人讨厌，而且当您考虑到损失的时间(我在一家非常大的公司工作)时，您只需要等待这个该死的东西重新加载，然后如果预刷新被遗忘了，就必须重新输入提交的信息，因为通常情况下，它会超出我的范围。在某种程度上，我希望成为程序员和我们的客户服务机构之间的联络人。

不管怎样，我离题了。

我想要做的是：，我想要创建一个Javascript书签，或者什么东西，如果活动在特定的时间框架内没有被检测到，它会自动刷新任何页面。这个时间框架将比我最终知道会话超时是什么的时间稍微短一些。基本上，我只想让页面重新加载自己，比方说，五分钟，如果在这段时间内没有活动。(我不希望它突然刷新，因为在我使用应用程序的过程中，时间已经到了，它唯一应该进行自动刷新的时间是在应用程序页面一直处于空闲状态时)

这能用Javascript书签来完成吗？我是否应该编写一个在iFrame中加载应用程序页的不同类型的页面“包装器”？我使用的应用站点有很多子页面，如果自动刷新超时发生，我希望它刷新任何我碰巧在的页面。当然，如果这是不可能的，我会接受它只是重新加载主页，如果这是不容易的，因为如果我已经离开应用程序足够长的超时时间，那么我很可能不需要仍然在任何帐户/页面，我在当时。

希望我已经解释得够好了。逻辑很简单-- if no activity detected withing x amount of time, refresh the current page是它的要点。

谢谢你，我的StackOverflow兄弟们，再次感谢你们的帮助。

-Sootah

因为我没有能力影响页面本身的编码，所以我必须有尽可能简单的解决方案。如果达到超时，那么在最后一次刷新/页面处理之后刷新相同页面的书签将是完美的。

如果这是不可能的，那么如果我可以编写一个简单的页面，我可以从本地计算机上运行，通过将页面加载到一个框架或其他可以接受的东西中来执行相同的功能。

EDIT 10/3/11 7:25am MST

由于我在工作中的坟墓和一个奇怪的时间表(不幸的是，这个网站被封锁了，因为它被认为是一个‘论坛’--我在金融界工作，他们对信息泄露过于谨慎)，在我授予赏金之前，这些事件探测器中的一个会检测到页面最后一次加载/？之类的东西吗？我认为，从上次加载页面时开始设置计时器将是最简单和最有效的方法。我的鼠标可能在浏览器上移动，因为我在处理其他事情时无意中打开了站点，如果计时器因为这个原因而重置，而我实际上没有与站点交互，页面加载/重新加载，则会话超时。

Answer 1

这是书签代码#1，设置为5秒。把时间改为你更喜欢的东西。

javascript:
(function () { 
    var q = null;
    function refresh() { window.location.reload(); }
    function x() { clearTimeout(q); a(); }
    function a() { q = setTimeout( refresh, 5000 ); }

    document.body.onclick = x;
    document.body.onmousemove = x;
    document.body.onmousedown = x;
    document.body.onkeydown = x;
}())

如果包含eventListeners会更好，但我认为您也需要支持IE8，所以我用内联事件替换了它们--如果不需要IE8，使用代码#2。

javascript:
(function () { 
    var q = null;
    function refresh() { window.location.reload(); }
    function x() { clearTimeout(q); a(); }
    function a() { q = setTimeout( refresh, 5000 ); }

    document.body.addEventListener( "click", x, false );
    document.body.addEventListener( "mousemove", x, false );
    document.body.addEventListener( "mousedown", x, false );
    document.body.addEventListener( "keydown", x, false );
}())

编辑：回应评论，这里是代码#3与拉，而不是刷新页面。然而，尽管有使用iframe的建议，我还是认为最好不要在该页面上执行脚本，因此我们将使用img：

javascript:
(function () { 
    var q = null;
    var u = window.location.href;
    var i = document.createElement('img');
    i.style = "width: 1px; height: 1px;";
    document.body.appendChild(i);
    function refresh() {
        i.src = "";
        i.src = u;
        x(); 
    }
    function x() { clearTimeout(q); a(); }
    function a() { q = setTimeout( refresh, 5000 ); }

    var evs = ['click', 'mousemove', 'mousedown', 'keydown']; 
    for( var j = 0; j < evs.length; j++) {
        document.body['on'+evs[j]] = x;
    }
}())

Answer 2

创建一个书签并将代码放在下面的"url“值中。请注意，您应该更改"sessiontimeout“和”校验间隔“的值。它们都是毫秒。

javascript:(function(){var lastmove = new Date().valueOf(),sessiontimeout=10000,checkinterval=1000;document.onmousemove = function(e){lastmove= new Date().valueOf();};timer = setInterval( function() {var differential = (new Date().valueOf() - lastmove);if (differential > sessiontimeout) {var iframe = document.getElementById("bkmrkiframerefresher");if (iframe) { document.getElementsByTagName("body")[0].removeChild(iframe);} iframe = document.createElement("iframe");iframe.setAttribute("src", "/");iframe.setAttribute("width", 0);iframe.setAttribute("height", 0);iframe.setAttribute("style", "width:0;height:0;display:none;");iframe.setAttribute("id", "bkmrkiframerefresher");document.getElementsByTagName("body")[0].appendChild(iframe);lastmove = new Date().valueOf();} }, checkinterval);})();

这是一个书签，它将在页面中注入下面的代码。我测试了Chrome版的书签。它在多个站点上工作，除了堆栈溢出之外，它们似乎出于安全原因阻止了帧设置。在您离开办公桌之前，打开您希望保持活动的网站，然后单击它上的书签。当您返回时，刷新页面以便清除正在运行的计时器。

格式化(和注释)代码是：

<script type="text/javascript">
            // last time the mouse moved
            var lastmove = new Date().valueOf();
            var sessiontimeout=10000;
            var checkinterval=1000;

            // reset the last time the mouse moved
            document.onmousemove = function(e){
                lastmove= new Date().valueOf();
            }

            // check periodically for timeout
            timer = setInterval( function() {

                var differential = (new Date().valueOf() - lastmove);

                if (differential > sessiontimeout) {
                    var iframe = document.getElementById("bkmrkiframerefresher");
                    // iframe already exists, remove it before loading it back
                    if (iframe) {
                        document.getElementsByTagName("body")[0].removeChild(iframe);
                    }

                    // alert("more than 10 secs elapsed " + differential);
                    // create an iframe and set its src to the website's root
                    iframe = document.createElement("iframe");
                    iframe.setAttribute("src", "/");
                    iframe.setAttribute("width", 0);
                    iframe.setAttribute("height", 0);
                    iframe.setAttribute("id", "bkmrkiframerefresher");
                    iframe.setAttribute("style", "width:0;height:0;display:none;");
                    document.getElementsByTagName("body")[0].appendChild(iframe);

                    // reset counter.
                    lastmove = new Date().valueOf();
                }
            }, checkinterval);

        </script>

Stefan在上面建议，除了轮询之外，您不需要逻辑。编辑的代码如下：

<script type="text/javascript">
            var pollInterval=1000;

            timer = setInterval( function() {
                    var iframe = document.getElementById("bkmrkiframerefresher");
                    // iframe already exists, remove it before loading it back
                    if (iframe) {
                        document.getElementsByTagName("body")[0].removeChild(iframe);
                    }

                    // create an iframe and set its src to the website's root
                    iframe = document.createElement("iframe");
                    iframe.setAttribute("src", "/");
                    iframe.setAttribute("width", 0);
                    iframe.setAttribute("height", 0);
                    iframe.setAttribute("id", "bkmrkiframerefresher");
                    iframe.setAttribute("style", "width:0;height:0;display:none;");
                    document.getElementsByTagName("body")[0].appendChild(iframe);
                }
            }, pollInterval);

        </script>

Answer 3

此代码只重新加载页面一次

下面是一个书签(受Kaj的伪代码启发)，在Chrome和Safari中进行测试，在行开始时用var时间更改超时值

班轮：

javascript:var time = 500; var timeoutFunc = function(){location.reload(true);};timeout = setTimeout(timeoutFunc,time);document.onmousemove = function() {clearTimeout(timeout);timeout = setTimeout(timeoutFunc,time); };

代码

//The time in milliseconds before reload
var time = 500;
//The function that is called when the timer has reached 0
var timeoutFunc = function()  { 
    location.reload(true);
};
//start the timer
timeout = setTimeout(timeoutFunc,time);
//restart the timer if the mouse is moved
document.onmousemove = function() {
    clearTimeout(timeout);
    timeout = setTimeout(timeoutFunc,time); 
};