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

问题描述 投票:1回答:3

一旦用户空闲了一段特定的时间,我正在尝试刷新页面或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>
jquery iframe refresh idle-timer
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值(以像素为单位,你必须自己弄清楚,因为我不知道正确的坐标。


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>

-1
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.