Question

一旦用户空闲了一段特定的时间，我正在尝试刷新页面或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>

Answer 1

如果你知道你的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值（以像素为单位，你必须自己弄清楚，因为我不知道正确的坐标。

Answer 2

感谢大家的贡献，我已经得到了我的问题的答案，从我提出的关于 mouseenter / mouseleave 事件的其他问题收集更多具体信息后（答案：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>

Answer 3

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

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

3 个答案: