1

ユーザーが一定時間アイドル状態になったら、ページまたは iFrame (どちらでもよい) を更新しようとしています。マウスが実際の iFrame (移動なし) の上にある場合、状態がまだアクティブであると見なされることを確認したいと思います。ブラウザーの別のタブにいて、マウスが動いているかアイドル状態の場合、iFrame を含むタブを引き続き更新したいと思います。

複数のjqueryプラグインやその他のソリューションを使用しようとしましたが、それらはすべて、マウスがiFrameの上にあるときに更新されないことを認識していないようです.

関連する回答 ( https://stackoverflow.com/a/4644315 )の次のコードから始めました。

iFrame のソース例として vimeo.com を使用しています。

<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

貢献していただきありがとうございます。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 に答える
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 に答える