在HTML中自我刷新的提示怎么编写？

落尘_尘落

关注

html页面实现自动刷新的几种方法

1. 页面需要定时刷新，实时加载数据（H5中的WebSocket和SSE可以实现局部刷新）

示例代码：页面自动刷新注：其中10指每隔10秒刷新一次页面.

<meta http-equiv="refresh" content="10">

2. 一定时间之后跳转到指定页面（登录注册之类）

示例代码：跳转到指定页面

<meta http-equiv="refresh" content="10url=http://www.51jfgou.com">

3. 前端开发使用伪数据调试html页面（修改一些js的变量值，可以自动刷新效果)

示例代码：页面自动刷新js版

<script language="JavaScript">

setTimeout(function(){location.reload()},1000)//指定1秒刷新一次

</script>

首先，可以明确的是，网页局部刷新是不难实现的，实际上很多网站也是支持的，比如站内信、实时大盘数据之类的应用。

但是为什么很多网站不支持呢？主要原因有几个方面：首先要做好还是需要一些基础设施和技术支持的，另外也需要一些额外的服务器资源。所以一些网站，尤其是传统的网站大多不支持，比如一些新闻站点、公告/公示、内容发布网站等等。

技术实现方案有很多种:

最简单的就是每个一段时间（比如3秒）请求接口更新数据并重新渲染，这么做对服务器压力较大。

其次是通过长连接，就是网页发起一个HTTP请求，服务器端一直不响应，等到有数据更新的时候再吧新数据返回，网页拿到数据后重新渲染，然后再次发起一个HTTP请求，不断这么循环，网页就可以实时拿到最新数据。

更好的方案是通过websocket建立长连接，这样web端和服务器端就可以实时的双向通讯，及时拿到最新数据，看起来与HTTP长连接区别不大，但是因为实现机制不一样，websocket会有更低的资源消耗。

网站不支持并不意味着用户不需要，比如公告/公示网站，商品信息，动态的用户行为、销售等数据，对很多人就非常重要，需要实时关注。这个时候可以通过一些辅助工具完成信息的监控和管理，比如：网页更新提醒浏览器插件

写个浏览器版本检测代码，检测出来版本如果与你所设定的版本不符，则显示上述所示内容。用js或者别的脚本语言都能实现的。

下面是该网站的代码。你参考着来修改吧：

<div class="top_logo"><a href="javascript:void(0)" title="把2345网址导航设为主页" target="_self" onClick="if(T.browser.ie === '6.0'){window.open('http://bbs.2345.cn/thread.php?fid=1&pid=2678844')return false}T.setHomePage(this,'http://www.2345.com/?t=2345')clickCount('homepage1')return(false)"><img src="http://www.2345.com/i/blank.png" width="10" height="10" id="websiteLogo"></a><span class="tipSet_ie6" id="J_tipSet_ie6" style="display:none" onMouseOver="this.className='tipSet_ie6_hov'" onMouseOut="this.className='tipSet_ie6'"></span><em class="close_tip_ie6" onClick="localStorage.setItem('__tipSet_ie6__','1')$('J_tipSet_ie6').style.display='none'" title="关闭"></em></div>

下面的代码放到页面的底部：

<span style="display:none"><script src="http://union2.50bang.org/js/2345"></script><script>(function(doc) {var div = $('corner_div'), appendImg = false, doSth = function (){ var d = doc.documentElement, w = window.innerWidth || (d &&d.clientWidth ) || doc.body.clientWidth if ( w <($CONFIG['wideScreen'] ? 1202 : 998 ) + 200 ){ div.style.display = 'none' }else{ if (!appendImg) { if (isIE6) { $('J_cor_bg').style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/corner_0108.png\',sizingMethod=\'crop\')' }else{ $('J_cor_bg').style.background = 'url(images/corner_0108.png) no-repeat' } appendImg = true} div.style.display = 'block' } } //doSth() //T.addEvent(window,'resize',function(){T.throttle(doSth)})}(document))if ($CONFIG['wideScreen']) {document.write('<scri'+'pt src = "http://union2.50bang.org/js/width"></scri'+'pt>')}try{ if (window.external.RCCoralOnlineFavPage('productVersion')) {var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://")document.write(unescape("%3Cspan id='cnzz_stat_icon_1000110207'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/q_stat.php%3Fid%3D1000110207' type='text/javascript'%3E%3C/script%3E")) }}catch(e){} //ie6升级提示(function(doc,b) { var date = new Date($CONFIG['time']) , ls = localStorage.getItem('toptip_ie6') , div if (b.ie !== '6.0' || b.isShell || ls === '1' || date.getTime() <parseInt(ls)) {return} localStorage.setItem('toptip_ie6',date.setHours(23, 59, 59)) div = document.createElement('DIV'), firstChildren = document.body.children[0] div.className = 'stopie6' div.innerHTML = '<div class="inner"><span class="st_left"><ins class="icon"></ins><a href="http://digi.it.sohu.com/20131115/n390199230.shtml">微软即将停止IE6更新</a>，为保证安全上网，请立即将浏览器升级为<a href="http://ie.2345.com/?2345" class="link">2345智能浏览器</a>!</span><a target="_self" href="http://download.2345.com/down/2345Explorer_100220.exe" class="btn_browse">立即更新</a><a id="J_ie6_close" href="javascript:" target="_self" class="st_close" title="关闭"></a></div>' firstChildren.parentNode.insertBefore(div, firstChildren) $('J_ie6_close').onclick = function() { localStorage.setItem('toptip_ie6','1') doc.body.removeChild(div) event.returnValue = false }} (document,T.browser))</script></span>

祝你成功！

---