如果用户空闲，请重新加载页面或iFrame
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如果用户空闲，请重新加载页面或iFrame相关的知识，希望对你有一定的参考价值。
一旦用户空闲了一段特定的时间，我正在尝试刷新页面或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>
如果您知道页面上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值（以像素为单位，你必须自己弄清楚，因为我不知道正确的坐标。
谢谢大家的贡献，在收到关于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>
如果您知道页面上iframe的确切位置，则只需记录鼠标移动坐标（如果它们与视频所在的位置匹配），则禁用刷新。
以上是关于如果用户空闲，请重新加载页面或iFrame的主要内容，如果未能解决你的问题，请参考以下文章
HTML 中 嵌套iframe 不断刷新 登录页面 ，此页面会过期，如果会，怎么解决