【综合工具】实现html页面自动刷新的几种方式

综合工具

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

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

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

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

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

 <script language="JavaScript">
 function Refresh()
 {
 window.location.reload();
 }
 setTimeout('Refresh()',1000); //1秒刷新一次
 </script>
<!--页面自动跳转js方式,这种方式没有跳转倒计时,不够友好-->
 1 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script language="javascript">
 function goUrl()
 {
   var url="https://www.7chaowan.com";
   location.href=url;
 }
 </script>
 </head>
 <body onload="setTimeout('goUrl()', 1000);">  <!--1秒钟后页面自动跳转到https://www.7chaowan.com-->
 </body>
 </html>

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

 <html>
 <head>
 <script type="text/javascript">
 var t=10;
 setInterval("refer()",1000);
 function refer(){
  if(t==0){
  location.href="https://www.7chaowan.com";
  }
  document.getElementById('show').innerHTML=""+t+"秒后跳转到七玩网的博客";
  t--;
 }
 </script>
 <body>
 <span id="show"></span>
 </body>
 </head>
 </html>

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

本站QQ群:1028555377,点击加入
联系站长:QQ2726054311