實現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中方式,因為這個方式會比較人性化。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM