1

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

3 回答 3

0

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

于 2013-07-18T04:01:12.803 回答
0

感谢大家的贡献，在我从另一个关于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>
于 2013-07-18T23:31:46.513 回答
-1

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

于 2013-07-18T04:08:33.613 回答