自动刷新网页

• 下载源代码 - 28.3 KB

引言

在编写网页时，有时需要自动刷新页面。老实说，AJAX 多数时候是一个不错的解决方案。但当您不想加载所有 AJAX 内容来做一些简单的事情时，问题就出现了。

背景

我当时正在为下载网站进行增强。他们希望显示文件被下载了多少次的计数器。所以我开始研究自动刷新网页以显示计数器变化的方法。

问题

在我的下载示例中，我使用了两个页面。一个页面显示所有可以下载的文件 (download.aspx)。当点击链接时，我执行服务器转移到第二个页面，该页面使用 Response 对象来传递内容并更新计数器。问题是服务器转移使我无法刷新 download.aspx 页面上的计数器。

解决方案

对于下载示例，我决定使用 JavaScript 解决方案。您也可以使用 meta 标签来刷新页面，所以我也会展示这些细节。

关于 JavaScript 刷新的详细信息

JavaScript 解决方案非常简单。在 Repeater 的 PreRender 中，我将 JavaScript 添加到链接按钮中

protected void rFiles_preRender(object sender, EventArgs e)
{
 LinkButton lbtn = null;
 foreach (RepeaterItem ri in rpFiles.Items)
 {
  if (ri.ItemType == ListItemType.Item ||
      ri.ItemType == ListItemType.AlternatingItem)
  {
   lbtn = (LinkButton)ri.FindControl("lbtnFile");
   if (lbtn != null)
   { //reload the page in 1 second.
    lbtn.Attributes.Add("onclick", "setReloadTime(1)");
   }
  }
 } //foreach
}

这允许 JavaScript 在执行 Server.Transfer 的回发之前运行。 JavaScript 函数如下所示

<script type="text/javascript" language="javascript">
 var reloadTimer = null;
 var sURL = unescape(window.location.pathname);
 
 function setReloadTime(secs) 
 { //this function is used to refresh the broswer
    if (arguments.length == 1) 
    { //if some seconds are passed in then create and set the timer and 
      //have it call this function again with no seconds passed in
        if (reloadTimer) clearTimeout(reloadTimer);
        reloadTimer = setTimeout("setReloadTime()", 
                         Math.ceil(parseFloat(secs) * 1000));
    }
    else 
    { //No seconds were passed in the timer must be up clear the timer 
     //and refresh the browser
        reloadTimer = null;
        //passing true causes the request to go back to the web server
        // false refreshs the page from history
        //This is javascript 1.2
        location.reload(true);
        //This is javascript 1.1
        window.location.replace( sURL );
    }
 }
</script>

以下是我用来帮助我编写 JavaScript 的一些链接

• http://www.netlobo.com/javascript_location_reload.html
• http://www.grizzlyweb.com/webmaster/javascripts/refresh.asp

关于 Meta 标签刷新的详细信息

Meta 标签 Refresh 已经存在很长时间了。通常，当旧网页移动到新网页时，您会看到它。您通常将 meta 标签放在页面的头部。语法是

<meta http-equiv="Refresh" content="n;url"/>

其中 n 是秒数，url 是要刷新的 URL。如果省略 URL，则页面会刷新自身。

在我的示例代码中，页面每两秒更新一次当前时间。在页面加载事件中，我使用此代码来设置 meta 标签

if (this.Master.Page.Header != null)
{
 HtmlHead hh = this.Master.Page.Header;
 HtmlMeta hm = new HtmlMeta();
 hm.Attributes.Add("http-equiv", "Refresh");
 hm.Attributes.Add("content", "2");
 hh.Controls.Add(hm);
}

注意：我的示例 Web 项目有一个母版页，因此设置 meta 标签的方式与您没有母版页时略有不同。

结论

我找到了一些自动刷新网页的有趣方法。我希望您也学到了一些东西。我知道 AJAX 更适合部分页面更新，但在这种情况下，JavaScript 运行良好，而且我不必在我的 Web 服务器上加载 AJAX。