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

最新推荐文章于 2024-07-10 09:30:28 发布

刀尖的舞者

最新推荐文章于 2024-07-10 09:30:28 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： javascript 常用代码片段 html页面自动刷新 js定时跳转页面

原文链接：https://www.mk2048.com/blog/blog.php?id=h10h2kcjkkib&title=%E5%AE%9E%E7%8E%B0html%E9%A1%B5%E9%9D%A2%E8%87%AA%E5%8A%A8%E5%88%B7%E6%96%B0%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F

版权

前端专栏收录该内容

280 篇文章 0 订阅

订阅专栏

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

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

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中方式，因为这个方式会比较人性化。

刀尖的舞者

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
实现html页面自动刷新的几种方式

自动页面刷新通常会用在对数据的实时性比较敏感的网站中，比如股票走势等，另外在普通的页面自动跳转中也会使用到页面自动刷新技术。页面刷新我见过的有三种方式，下面来一一说明 1、通过在<head>标签中添...
复制链接

扫一扫