自动页面刷新通常会用在对数据的实时性比较敏感的网站中,比如股票走势等,另外在普通的页面自动跳转中也会使用到页面自动刷新技术。
页面刷新我见过的有三种方式,下面来一一说明
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中方式,因为这个方式会比较人性化。