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

Question

我在工作中使用了一个基于浏览器的应用程序（由于显而易见的原因，实际上所有企业应用程序现在都是基于浏览器的），该应用程序的会话超时时间短得令人烦恼。我不确定会话超时具体设置为多少，但大约是 5-10 分钟。

每当我必须使用它时，会话都会不可避免地超时，我将信息输入到应用程序中，提交它，然后页面加载一个全新的会话，而实际上没有传递任何信息 - 我得到的只是一个新的会话会议。然后我必须重新输入信息并再次提交，以便它真正提取出我想要的内容。当然，我可以先刷新页面，然后输入信息，但我永远不知道会话是否超时，有时它运行得非常慢，所以这是浪费时间。我们的开发团队无法预见到像这样的小事情不仅令人烦恼，而且当你考虑到只是等待该死的事情所损失的时间（我在一家非常大的公司工作）时，最终还会花费我们大量的钱。重新加载，然后如果忘记预刷新，则必须重新输入提交的信息，因为这通常超出了我的能力范围。在某个时候，我希望成为程序员和我们的客户服务机构之间的联络人。

无论如何，我离题了。

我想要做的是：我想创建一个 Javascript 书签或其他东西，如果在特定时间范围内未检测到活动，它会自动刷新它所在的任何页面。这个时间范围将比我最终弄清楚会话超时时间要短一些。基本上我只想让页面每隔五分钟重新加载一次（如果该时间段内没有活动）。 （我不希望它突然刷新，因为当我使用应用程序时时间已经到了，它应该进行自动刷新的唯一时间是应用程序页面一直处于空闲状态）

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

希望我已经很好地解释了自己。逻辑很简单 - 如果在 x 时间内没有检测到任何活动，则刷新当前页面 就是它的要点。

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

-Sootah

---

由于我无法影响页面本身的编码，因此我必须尽可能采用最简单的解决方案。一个对最后一次刷新/页面加载进行计时，然后在达到超时时刷新同一页面的书签将是完美的。

如果这是不可能的，那么如果我可以编写一个可以从本地计算机运行的简单页面，该页面可以通过在框架中加载页面或也可以接受的方式来执行相同的功能。

---

EDIT 10/3/11 7:25am MST

由于我在坟墓里工作，而且工作时间表很奇怪（不幸的是，这个网站被封锁了，因为它被认为是一个“论坛”——我在金融行业工作，他们对信息泄露过于谨慎）在我授予赏金之前，这些事件检测器之一是否检测到页面上次加载的时间/？类似 document.onload 之类的东西。我认为从上次加载页面开始设置计时器将是最简单、最有效的方法。在处理其他事情时，我的鼠标可能会无意中移到我打开网站的浏览器上，如果计时器因此而重置，而我实际上没有以页面加载/重新加载的方式与网站进行交互，则会话超时。

Answer 1

这是为您准备的书签代码#1，设置为五秒。将时间更改为您更喜欢的时间。

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;
}())

ps：包含 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”和“checkinterval”的值。它们都是以毫秒为单位的。

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 中测试了书签。它在除 stackoverflow 之外的多个站点上运行，似乎它们出于安全原因阻止了框架。 在离开办公桌之前，打开您想要保持会话活动的网站，然后单击其上的小书签。返回后，刷新页面以摆脱正在运行的计时器。

格式化（和注释）的代码是：

<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 Toet 的伪代码启发），在 Chrome 和 Safari 中测试，使用行开头的 var time 更改超时值
在线用户：

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); 
};

Answer 4

像这样的伪代码

timeout = settimeout("call",200);
document.onmousemove = function() { timeout = new timeout("call",200); }
function call() {
    document.refresh();
}

？