自動頁面刷新通常會用在對數據的實時性比較敏感的網站中,比如股票走勢等,另外在普通的頁面自動跳轉中也會使用到頁面自動刷新技術。
頁面刷新我見過的有三種方式,下面來一一說明
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中方式,因為這個方式會比較人性化。