如果用户空闲，则重新加载页面或iFrame

一旦用户空闲了一段特定的时间，我将尝试刷新页面或iFrame（两者都很好）我想确定，如果鼠标在实际iFrame上（没有移动），那么我的状态仍然被认为是活动的如果我在浏览器的另一个选项卡中，并且鼠标正在移动或空闲，那么我希望包含iFrame的选项卡仍然刷新。

我尝试过使用多个jquery插件和其他解决方案，但他们似乎都没有意识到，当我的鼠标在iFrame上时，它不应该刷新。

我从一个相关答案开始使用以下代码(https://stackoverflow.com/a/4644315)

我使用vimeo.com作为iFrame的示例来源。

<html>
<head>
<title>iFrame AutoRefresh on idle</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
    var time = new Date().getTime();
    $(document.getElementById("iFrame1")).bind("mouseover", function(e) {
        time = new Date().getTime();
    });
    function refresh() {
        if(new Date().getTime() - time >= 6000)
            window.location.reload(true);
        else
            setTimeout(refresh, 10000);
    }
    setTimeout(refresh, 10000);
</script>
<style>
    body {
        margin: 0;
    }
</style>
</head>
<body>
    <iframe id="iFrame1" src="http://www.vimeo.com/" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>
    </iframe>
</body>
</html>

如果您知道iframe在页面上的确切位置，您可以只记录鼠标移动坐标，如果它们与视频所在的位置匹配，则禁用刷新。

http://docs.jquery.com/Tutorials:Mouse_Position

编辑，也许是这样

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
    $(document).ready(function() {
        var timer;
        function start() {
            timer = setInterval(function(){refresh()}, 5000);
        }
        start();
        $(document).mousemove(function(e) {
            if (e.pageX >= X && e.pageX <= Y ) {
                //stop if the coordinates are correct on x intercept
                clearTimeout(timer);
            } else if (e.pageY >= Y && e.pageY <= Y ) {
                //stop if the coordinates are correct on y intercept
                clearTimeout(timer);
            } else {
                // not hovering anymore, start counting seconds again...
                start();
            }
        });
        function refresh() {
            //window.location.reload(true);
            alert("refresh!!!");
        }
    });
</script>
</head>
<body>
    <iframe id="iFrame1" src="http://www.vimeo.com/" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>
    </iframe>
</body>
</html>

Y和X值（以像素为单位，你必须自己计算，因为我不知道正确的坐标。

感谢大家的贡献，我从另一个问题中收集了更多关于mouseenter/mouseleve事件的具体信息，我的问题得到了答案（答案：https://stackoverflow.com/a/17717275/2593839)。

如果鼠标光标移出窗口，计时器将启动，一旦计时器达到指定的时间间隔，就会刷新页面。如果鼠标在达到指定间隔之前返回窗口，则计时器将重置。

对于任何想要最终代码的人来说，它在下面。你可以更改iFrame源和5秒的刷新率（用于测试代码）以满足您的需求：

<html>
  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
  <title></title>
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script>
    function refresh() {
        window.location.reload(true);
    }
    var timer;
    function start() {
        timer = setTimeout(function(){refresh()}, 5000);
    }
    jQuery(document).ready(function() {
        start();
        jQuery('body').mouseenter(function() {
            clearTimeout(timer);
        }).mouseleave(function(e) {
            var pageX = e.pageX || e.clientX,
                    pageY = e.pageY || e.clientY;
            if(pageX <= 0 || pageY <= 0) {
                start();
            }else {
                clearTimeout(timer);
            }
        });
    });
  </script>
  <style>
    body {
        margin: 0;
    }
  </style>
</head>
  <body>
    <iframe id="iFrame1" src="http://www.website.com/" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>
  </body>
</html>

如果您知道iframe在页面上的确切位置，您可以只记录鼠标移动坐标，如果它们与视频所在的位置匹配，则禁用刷新。

相关内容

最新更新

热门标签：