简体繁体 English

强大的自动刷新网页

[英]Robust auto-refresh web page

原文 2010-09-16 19:16:30 6 3 javascript/ refresh/ page-refresh

I have many web pages that needs to auto-refresh once a minute. 我有很多网页需要每分钟自动刷新一次。 Easily done with META REFRESH or a some javascript. 使用META REFRESH或一些javascript轻松完成。 (And yes, the whole pages needs to refresh -- LOTS of content changing). （是的，整个页面需要刷新 - 很多内容都在变化）。

However, it needs to be as robust as possible. 但是，它需要尽可能健壮。 If the web server is momentarily down or there is a network hiccup, it can't refresh and will then get a 404 error, etc and be permanently stuck on the error page. 如果Web服务器暂时关闭或网络打嗝，它将无法刷新，然后会出现404错误等，并永久停留在错误页面上。

The only option I can come up with is host the whole page in an IFRAME, and have some script on the parent page fresh the framed page. 我能想出的唯一选择是将整个页面托管在IFRAME中，并在父页面上放置一些脚本以刷新框架页面。 The frame should be invisible so any resizing of the window would also need to resize the IFRAME. 框架应该是不可见的，因此任何窗口大小调整都需要调整IFRAME的大小。

Is there an easier, more elegant solution? 有更简单，更优雅的解决方案吗？ (Going to Flash/AIR/Silverlight also isn't an option because of time constraints). （由于时间限制，转到Flash / AIR / Silverlight也不是一个选项）。

3 个解决方案

You could load the new content of the page using Ajax. 您可以使用Ajax加载页面的新内容。 If your page is generated on the server side you can just omit the HTML around the body and only output it's content. 如果您的页面是在服务器端生成的，那么您可以省略身体周围的HTML并仅输出它的内容。 You can then receive the new body with Ajax and replace the existing body of the page with body.innerHTML = request.responseText . 然后，您可以使用Ajax接收新主体，并使用body.innerHTML = request.responseText替换页面的现有主体。 In the Ajax callback you can do all kind of error handling you like, even ignore any error and retry the Ajax request. 在Ajax回调中，您可以执行您喜欢的所有类型的错误处理，甚至可以忽略任何错误并重试Ajax请求。

<html>
<head>
<script type="text/javascript">
function doRequest() {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            if (request.status == 200)
                 body.innerHTML = request.responseText;
            doRequest(); // restart the request
        }
    }
    request.open("get", "", true);
    request.send(null);
}
</script>
<body onload="doRequest()">
Page content...
</body>
</html>

Google uses the iframe method for gmail. Google对Gmail使用iframe方法。 Can't go wrong with google's solution. 谷歌的解决方案不会出错。

您还可以使用JQUERY加载方法。