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

自动页面刷新通常会用在对数据的实时性比较敏感的网站中，比如股票走势等，另外在普通的页面自动跳转中也会使用到页面自动刷新技术。

页面刷新我见过的有三种方式，下面来一一说明

1、通过在<head>标签中添加<meta>标签来实现

1 <meta http-equiv="Refresh" content="1";/>  <!--页面每1秒刷新一次-->
2 <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />    <!--5秒钟后页面自动跳转到http://www.w3school.com.cn。这种跳转方式没有倒计时，不够友好-->

2、通过js来实现页面刷新或者跳转

1 <script language="JavaScript">  
2 function Refresh()  
3 {  
4 window.location.reload();  
5 }  
6 setTimeout('Refresh()',1000); //1秒刷新一次  
7 </script>

<!--页面自动跳转js方式，这种方式没有跳转倒计时，不够友好-->
 1 <html>  
 2 <head>  
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
 4 <script language="javascript">  
 5 function goUrl()  
 6 {  
 7   var url="http://www.cnblogs.com/lihuibin";  
 8   location.href=url;  
 9 }  
10 </script>  
11 </head>  
12 <body onload="setTimeout('goUrl()', 1000);">  <!--1秒钟后页面自动跳转到http://www.cnblogs.com/lihuibin-->
13 </body>  
14 </html>

3、在实现倒计时自动跳转的时候，不提示倒计时会很不友好，所以现在对（2）中js倒计时方式做出以下修改

 1 <html>
 2 <head>
 3 <script type="text/javascript"> 
 4 var t=10;
 5 setInterval("refer()",1000); 
 6 function refer(){ 
 7  if(t==0){ 
 8  location.href="//www.cnblogs.com/lihuibin";
 9  } 
10  document.getElementById('show').innerHTML=""+t+"秒后跳转到小斌的博客";
11  t--;
12 } 
13 </script> 
14 <body>
15 <span id="show"></span> 
16 </body>
17 </head>
18 </html>

总结：在定时跳转的时候，个人还是比较用第3中方式，因为这个方式会比较人性化。

posted @ 2018-10-23 09:53 Java小斌阅读(12256) 评论(0) 收藏举报

刷新页面返回顶部