1

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>
Mel
  • 5,837
  • 10
  • 37
  • 42
Yuvi100
  • 25
  • 1
  • 6

3 Answers3

0

If you know the exact position of your iframe on the page, you can just record mouse movement coordinates, if they match where the video is located disable refresh.

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

Edit, something like that maybe.

<!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 and X values (in pixels you have to figure out by yourself because I have no idea about correct coordinates.

Badr Hari
  • 8,114
  • 18
  • 67
  • 100
  • The iFrame is "full screen" as suggested by the – Yuvi100 Jul 18 '13 at 04:06
  • Why is the iframe in "fullscreen", its like embedding whole vimeo site to your site?! – Badr Hari Jul 18 '13 at 04:17
  • yeah I know, I'm not going to be using vimeo.com for my final output, it's just there as an example. I can't inject a script into a webpage and thus i'm having a fullscreen iframe and doing it that way. – Yuvi100 Jul 18 '13 at 04:26
  • I uptated my answer, but I don't know the coordinates, you have to figure them out by yourself. – Badr Hari Jul 18 '13 at 04:39
  • Do I have to use the mouse position method or can I just do mouseover Window or elementByID or Document – Yuvi100 Jul 18 '13 at 05:13
  • Use document since the iframe is "fullscreen" anyways. – Badr Hari Jul 18 '13 at 05:45
  • how would I code it through **mouseenter** and **mouseleave** ? I think it's the better option – Yuvi100 Jul 18 '13 at 06:52
  • You can't, since the iframe is not on your server, you can't inject any scripts. – Badr Hari Jul 18 '13 at 10:57
0

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>
Asken
  • 7,679
  • 10
  • 45
  • 77
Yuvi100
  • 25
  • 1
  • 6
-1

If you know the exact position of your iframe on the page, you can just record mouse movement coordinates, if they match where the video is located disable refresh.

rasul
  • 1