没有用户活动时刷新 iframe答案

【问题标题】：Refresh iframe when no user activity没有用户活动时刷新 iframe
【发布时间】：2011-06-03 12:28:20
【问题描述】：

更新代码

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="text/html; charset=utf-8;" http-equiv="Content-Type;" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
     //This goes into a script tag in your head tag
     var docTimeOut;

     function bodyTimeOut() {
         docTimeOut=setTimeout("updateFrame();",10000);
     }

     function resetTimeOut() {
         //alert('reset!');
         clearTimeout(docTimeOut);
         bodyTimeOut();
     }

     function updateFrame() {
         //Loads the page's html into the div
         //Uncomment this in your actual code
         $.get('https://www.creator.zoho.com/somePage/', function(data) {
             $('openPrintRun').html(data);
         });
         //alert('update!');
     }

     //This function runs when the DOM has finished loading
     $(function() {
         bodyTimeOut();
         //This binds the resettimeOut function the click, mousemove and mouseover events of the div
         $('#openPrintRun').bind('click mousemove mouseover', resetTimeOut);
     });
        // -->
    </script>


    <title>Untitled 1</title>
    </head>

    <body>
      <div class="openPrintRun" style="height:250px; width:100%;">
      </div>
     </body>

    </html>

我有一个 iframe，我想在没有用户活动时刷新它。目前我正在尝试使用它：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
var docTimeOut;
function bodyTimeOut()
{
    docTimeOut=setTimeout(function(){location.reload();},1200);
}

function resetTimeOut()
{
    clearTimeout(docTimeOut);
    bodyTimeOut();
}


document.onload = bodyTimeOut;

document.getElementById('openPrintRun').onmouseover= resetTimeOut;
</script>
<title>Untitled 1</title>
</head>

<body>
  <iframe id="openPrintRun" height='250px' width='100%' name='zoho-Open_Print_Runs' frameborder='0' scrolling='auto' allowTransparency ='true' src='somepage.html'></iframe>  
</body>

</html>

但它似乎不起作用。有没有更好或至少正确的方法来做到这一点？

【问题讨论】：

更新我的代码后，我仍然无法重新加载 iframe。 src 链接与此有什么关系吗？

标签： html iframe android-activity timeout refresh

【解决方案1】：

我认为问题在于您正在重新加载您所在的页面，而不是 iframe。有几种方法可以重新加载 iframe：

document.getElementById("openPrintRun").contentDocument.location.reload();

或

document.getElementById("openPrintRun").contentWindow.location.reload();

或

document.getElementById("openPrintRun").src = document.getElementById("openPrintRun").src;

编辑：这应该替换脚本中您拥有的部分：location.reload();

您可以在另一个网站here 上找到相关问题。

另外，请确保您正在加载的页面没有被缓存，否则该页面可能看起来与首次加载时相同。

【讨论】：

@shinjuo - 好吧，你的 iframe 的 onmouseover 已经有了。但是，您需要小心，因为如果您将其切换为仅 Aaron 在下面所说的内容并且如果他们正在输入（例如），它仍会刷新并且他们将丢失他们的信息。也许您可以将它附加到一些事件处理程序。 IE。如果他们单击、按键、鼠标悬停、鼠标移动等，它应该重置计时器，以便在他们在其中做事时不会刷新。我不确定您是否可以在 iframe 上使用模糊/焦点事件，但这也值得研究。
对不起，我对你给我的代码行的去向感到困惑，但我现在明白了。另外，如果我想添加 onkeypress 并单击，我是否应该添加另一行，例如：document.getElementById('openPrintRun').onkeypress= resetTimeOut;并继续添加这样的行以获取所有内容，或者是否有更有效的方法来做到这一点
@shinjuo：很抱歉。我将编辑我的答案，以便更清楚。是的，您可以这样做以添加更多事件。您可以做的一件事是将元素存储在变量中并重用它。前任。 var ifrm = document.getElementById('openPrintRun'); 然后使用ifrm.onclick = resetTimeOut; ifrm.onkeypress = resetTimeOut; 等（抱歉不能在这里发布新行）。这样做不会有任何明显的区别，但它的想法是它只需要进行一次 getElementById 查找。
你提到的最后一件事是确保页面没有被缓存。我该怎么做？
@shinjuo：有几种方法。如果您使用的是 PHP 或 ASP(.Net) 之类的语言，它们中的每一个都有防止它的方法。您还可以使用一些 html META 标签。查看this 网站，了解使用 Asp 和 HTML 的一些方法。

【解决方案2】：

尝试使用mousemove 事件（当用户忘记浏览器中的鼠标指针并走开时是否有活动？）并将其附加到body 元素。 iframe 可能不会发送此类事件（安全性：因此您无法从框架外看到鼠标指针）。

【讨论】：

你说要这样做：document.body.onmousemove=resetTimeOut;
我不是 100% 确定语法，但是是的，就像这样。如果它不起作用，请使用id="debug" 创建一个DIV。这样您就可以在页面上显示调试输出而不会阻塞：document.getElementById('debug').innerHtml='some text'