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

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

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

 <meta http-equiv="Refresh" content="1";/>  <!--页面每1秒刷新一次-->

 <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />    <!--5秒钟后页面自动跳转到http://www.w3school.com.cn。这种跳转方式没有倒计时，不够友好-->

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="http://www.cnblogs.com/lihuibin";

   location.href=url;

 }

 </script>

 </head>

 <body onload="setTimeout('goUrl()', 1000);">  <!--1秒钟后页面自动跳转到http://www.cnblogs.com/lihuibin-->

 </body>

 </html>

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

 <html>

 <head>

 <script type="text/javascript">

 var t=10;

 setInterval("refer()",1000);

 function refer(){

  if(t==0){

  location.href="//www.cnblogs.com/lihuibin";

  }

  document.getElementById('show').innerHTML=""+t+"秒后跳转到小斌的博客";

  t--;

 }

 </script>

 <body>

 <span id="show"></span>

 </body>

 </head>

 </html>

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

实现html页面自动刷新的几种方式的更多相关文章

  1. 详解Grunt插件之LiveReload实现页面自动刷新（两种方案）

    http://www.jb51.net/article/70415.htm    含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...

  2. html页面实现自动刷新的几种方法

    使用场景: 1. 页面需要定时刷新,实时加载数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据调试html页面(修改 ...

  3. PHP 页面自动刷新可借助JS来实现，简单示例如下：

    <?php  echo "系统当前时间戳为:"; echo ""; echo time(); //<!--JS 页面自动刷新 --> echo ...

  4. 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换

    2017春 前端自动化(二)   页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言:   此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...

  5. 方法总结：如何实现html页面自动刷新

    使用场景: 1. 页面需要定时刷新,实时加载数据,需要实时查看监控数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据 ...

  6. HTML 页面自动刷新

    学习就是一个不断积累的过程,每一天能够学到一点新东西说明自己就在进步!! HTML head 里面设置页面自动刷新功能 <meta http-equiv="Refresh" ...

  7. 如何设置页面自动刷新第一篇??　servlet setHeader("refresh","2")

    import java.io.IOException; import java.util.Random; import javax.servlet.ServletException; import j ...

  8. JAVA-JSP内置对象之response对象实现页面自动刷新

    相关资料:<21天学通Java Web开发> response对象 实现页面自动刷新1.可以通过response对象的addIntHeader()方法添加一个标题为Refrsh的标头,并指 ...

  9. html（对php也有效）页面自动刷新和跳转（简单版本）

    <html>    <head><title>html页面自动刷新和跳转</title><meta http-equiv="Refres ...

随机推荐

  1. [Java并发编程（一）] 线程池 FixedThreadPool vs CachedThreadPool ...

    [Java并发编程(一)] 线程池 FixedThreadPool vs CachedThreadPool ... 摘要 介绍 Java 并发包里的几个主要 ExecutorService . 正文 ...

  2. Android 8 蓝牙 连接过程

    packages\apps\Settings\src\com\android\settings\bluetooth\BluetoothPairingDetail.java @Override void ...

  3. [转]html5: postMessage解决跨域和跨页面通信的问题

    [转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...

  4. 不要在 foreach 循环里进行元素的 remove/add 操作。remove 元素请使用 Iterator 方式，如果并发操作，需要对 Iterator 对象加锁

    不要在 foreach 循环里进行元素的 remove/add 操作.remove 元素请使用 Iterator 方式,如果并发操作,需要对 Iterator 对象加锁. 正例: Iterator&l ...

  5. Parquet格式解析

    parquet是列式存储格式,官方文档 https://parquet.apache.org/documentation/latest/ 一个Parquet文件是由一个header以及一个或多个blo ...

  6. Linux下Qt Creator编辑器无法输入中文解决

    Ubuntu安装了搜狗输入法,在浏览器中可以使用,但是在Qt Creator中却无法输入中文. 解决办法: 执行sudo apt-get install fcitx-libs-qt5 该命令将库文件l ...

  7. 按位与（&）和按位或（|）

    /** * 按位与 : & * 按位或 : | */ public class Demo { /** * 按位与: 为什么(5 & 9)的值等于1 * 按位或: 为什么(5 | 9)的 ...

  8. TypeSrcript如何引入第三方库 如果加d.ts以及async await如何使用 demo，只有代码，文字后续补充

    https://files.cnblogs.com/files/cappuccino/laya2.rar

  9. Laravel 5.4设置logout注销账户的重定向路径

    当我们修改Laravel默认Auth默认路径时,在点击logout按钮注销时,默认跳转的地址为项目的根目录, 若想设置成自定义的重定向路径,可以按照如下设置: 方法一: 在Auth \ LoginCo ...

  10. layer loading层 的设置

    /* shadeClose 类型:Boolean 默认:true,是否点击遮罩时关闭层 */ var tishi = layer.open({ shadeClose: false ,type: 2 , ...