Question

更新代码

        <!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>

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

Answer 1

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

Answer 2

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

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

OR

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

OR

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

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

您可以在其他网站here上找到相关问题。

此外，请确保您正在加载的页面未被缓存，或者该页面可能看起来与首次加载时保持一致。

没有用户活动时刷新iframe

2 个答案: