Reload Page or iFrame if user is idle

I am trying to refresh the page or iFrame (either will be good) once a user has been idle for a specific period of time. I'd like to identify that if the mouse is over the actual iFrame (without movement) than my state is still considered active. If I'm in a different tab of the browser and the mouse is moving or idle, then I'd like the tab that contains the iFrame to still refresh.

I have tried to use multiple jquery plugins and other solutions yet all of them seem to not recognize that when my mouse is over the iFrame, then it should not refresh.

I've started with the following code from a related answer (https://stackoverflow.com/a/4644315)

I'm using vimeo.com as the example source of the 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>

Solution

Thank you all for contributing, I have got an answer to my question after gathering more specific information from another question I've asked in regards to mouseenter/mouseleave events (Answer: https://stackoverflow.com/a/17717275/2593839).

If the mouse cursor moves out of the window, the timer will begin and once the timer reaches the specified interval, it refreshes the page. If the mouse enters back into the window before the specified interval is reached, then the timer is reset.

For anyone wanting the final code, it's down below. You can just change the iFrame source and the refresh rate which is 5 seconds (used to test the code) to meet your needs:

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