仅在查看页面时运行 Javascript Ajax 调用答案

【问题标题】：Run Javascript Ajax calls only when the page is being viewed仅在查看页面时运行 Javascript Ajax 调用
【发布时间】：2012-02-28 17:59:46
【问题描述】：

我有一个在控制器上运行的 Web 应用程序（处理、内存和网络带宽几乎没有限制）。该页面基本上是一个简单的 HTML 文件，其中包含应定期更新的 LED。在每个时间间隔，Javascript 都会向服务器发送一个 Ajax 请求，并根据回复更新所有 LED。现在这工作正常！

问题是当用户打开其中一个页面并开始浏览其他内容时。出于安全和经济原因，我们不想在客户没有看到此页面时更新页面。这是算法：

我开发了这个小测试代码来看看页面事件是如何工作的 (see live on jsFiddle)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function m(msg){
    document.getElementById("logplace").innerHTML+=msg+"<br/>";
}
</script>
</head>
<body onblur="m('Blur')" onerror="m('Error')" onfocus="m('Focus')" onload="m('Load')" onresize="m('Resize')" onunload="m('Unload')">
<span id="logplace"></span>
</body>
</html>

如果用户当前正在查看页面，我需要仅更新页面。我搜索了 Stackoverflow，以下线程似乎不是答案：

PS。 JQuery 也存在于服务器上。但如果有更简单的方法，我宁愿不使用 JQuery。

【问题讨论】：

没有问对问题。是否正在查看此页面是关键位。答案是多种多样的，但可能不确定。试试stackoverflow.com/questions/354718/…
链接中的问题是关于具有焦点的页面元素。我问的是整个页面是否被查看。
页面是一个元素，所以同样的问题......

标签： javascript jquery

【解决方案1】：

var focused = false;

function onBlur() {
    focused = false;
};
function onFocus(){
    focused = true;
};

if (/*@cc_on!@*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}

然后你的javascript可以检查

if (focused)
{
    // process ajax
}

来源：http://www.thefutureoftheweb.com/blog/detect-browser-window-focus

查看他创建的演示，以便您可以看到它的实际效果：http://www.thefutureoftheweb.com/demo/2007-05-16-detect-browser-window-focus/

考虑到这一点，如果您的页面使用间隔计时器进行更新，则当窗口失去焦点时，您可以终止间隔，然后在窗口获得焦点时重新启动它。

【讨论】：

这个非常接近我想要的，但是有一个问题：用户有两个或多个显示屏幕，让这个网页在其中一个中打开并在其他显示屏幕上工作。即使页面没有获得焦点但仍然可见，该页面仍应得到更新。页面不应该更新的唯一时间是它不可见时（当浏览器最小化或用户切换到另一个选项卡时）。
除了检查焦点之外，javascript 没有其他办法。

【解决方案2】：

据我所知，您的数据库中有页面列表。您可以添加一个名为 is_viewed 的字段，并在用户每次进入页面时将其更新为 +1，每次用户退出页面时将其更新为 -1。因此，如果它是 ==0，您可以执行您的检查。
我没有看到任何其他方式（不是 Ajax）来检查另一个页面上发生的事情。所以无论如何你都必须发送请求

【讨论】：

这是一个有趣的解决方案。我仍然需要“监听”当前页面被“模糊”或“输入”时触发的事件。当用户关闭一个选项卡而不是简单地切换到另一个选项卡时，我还需要处理这种特殊情况。
我不确定“模糊”事件，但是对于关闭和离开并进入有 javascript 事件
我尝试了它们并使用一些代码更新了我的问题。仍然没有完全解决问题。请参阅我对弗朗西斯的回答的 cmets。
我怀疑你会得到一个理想的解决方案。尽管尝试将状态移植到 HTTP 上，但仍然存在差距。这是其中之一。我不确定我能否在没有太多麻烦的情况下在 web 浏览器中获得 100% 的 winforms... 太多变量不在您的控制之下。嗯，页面活动检测如何鼠标悬停，混乱但它应该工作。

【解决方案3】：

我建议当您启动窗口（您只想在可见时更新）时，您从主窗口或其他具有焦点的窗口启动它。结合 Francis 的焦点解决方案和以下技术，您可以从另一个访问窗口的 DOM。

您可以查看here 了解更多信息。基本上你会使用下面的代码

var pageControl=open('page.html','page name','width=200,height=200')

打开页面并能够使用javascript通过pageControl变量访问它。

它通过允许您在任一窗口具有焦点时更新页面、控制来自另一个窗口或主窗口的更新来解决问题。唯一的潜在障碍是兼容性。

主窗口解决方案可能涉及更多。但是，如果您要从另一个窗口执行此操作，您可以想象，如果您发现没有窗口具有焦点，那么您将不会触发更新脚本.. 否则触发它！

【讨论】：