网页自动刷新的实现

  有时候用到页面整体自动刷新,在前端可以用两种方式实现,第一种是利用meta标签发送http头实现自动刷新,第二种是使用javascript函数延时实现自动刷新。

  1、利用meta标签实现页面自动刷新

  meta标签可以有很多功能,位置是放在HTML代码的<head></head>之间,如下可实现每过5s刷新一次页面,

<meta http-equiv="refresh" content="5">

http-equiv="refresh"的作用是告诉浏览器自动刷新页面或者重定向到新的url

  2、利用javascript实现页面自动刷新

  javascript中的window.location中有刷新页面的方法reload(),将这个方法封装成一个函数,然后延时执行就可以了,刷新页面后又会执行,这样就实现了自动刷新

1 <script type="text/javascript">
2     function myrefresh(){
3         window.location.reload();
4     }
5     setTimeout(‘myrefresh()‘,5000);    //5s后执行函数刷新页面
6 </script>

这样页面就会自动刷新了

时间: 2024-10-20 20:32:14

网页自动刷新的实现的相关文章

打开页面自动刷新网页,自动刷新当前页面,JS调用

reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过"前进"和"后退"来访问已经被替换

使用Gulp实现网页自动刷新:gulp-connect

入门指南 1. 全局安装 gulp: npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: npm install --save-dev gulp 3. 在项目根目录下创建一个名为 gulpfile.js 的文件: var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 }); 4. 运行 gulp: gulp 默认的名为 defa

使用VScode配合chrome实现网页自动刷新

1.使用插件:livereload 2.VScode商店中搜索上述插件安装 3.Chrome商店中搜素上述插件安装 并设置允许访问文件网址: 4.在两方插件都打开的情况下,VScode中按下ctrl+S保存后chrome便会自动刷新出最新网页. 5.无法自动刷新的情况: 点击chrome的该扩展程序若显示Could not connect to LiveReload server. Please make sure that a compatible LiveReload server is r

打卡网页自动刷新网页资源文件

最近公司要求写一个网页用来保存报表数据,将报表导出存储在一个dataSource.js的文件中,然后向写好的网页直接读取该文件即可. 之前一直有一个问题,就是每次dataSource文件修改后,网页内容不能及时修改,显示的还是前一个dataSource的内容,经过网上查资料加自己的摸索,找到一个实现的方法: 在引用dataSource文件时,为其指定一个id: <script src="dataSource.js" charset="gb2312" id=&q

网页页面实现自动刷新的3种代码

网页自动不停刷新,或者过一段时间自动跳转到另外一个你自己设定的页面? 其实实现这个效果非常地基本,而且这个效果甚至不能称之为特殊效果.你只要把如下代码加入你的网页中就可以了. 1.页面自动刷新:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面. 2.页面自动跳转:把如下代码加入<head>区域中 <meta http-equi

response对象处理HTTP文件头(禁用缓存、设置页面自动刷新、定时跳转网页)

response对象处理HTTP文件头 制作人:全心全意 禁用缓存 在默认情况下,浏览器将会对显示的网页内容进行缓存.这样,当用户再次访问相关网页时,浏览器会判断网页是否有变化,如果没有变化则直接显示缓存中的内容,这样可以提高网页的显示速度.对于一些安全性要求较高的网站,通常需要禁用缓存. 通过设置HTTP头的方法实现禁用缓存: <% response.setHeader("Cache-Control", "no-store"); response.setDa

fis3实现前端网页实时刷新(自动刷新)

默认已经装好了node, 没有装的话跳转 node官网 进行下载 首先安装fis3 npm install -g fis3 安装完成后执行 fis3 -v 判断是否安装成功,如果安装成功,则显示类似如下信息: [INFO] Currently running fis3 (/Users/Your/Dev/fis3/dev/fis3) v3.0.0 /\\\\\\\\\\\\\\\ /\\\\\\\\\\\ /\\\\\\\\\\ \/\\\/////////// \/////\\\/// /\\\

js实现的可以自动刷新的时间日期代码实例

js实现的可以自动刷新的时间日期代码实例:可以自动刷新的时间日期效果在很多网页都在使用,因为能够让页面更加动感一些,也更加人性化,用户可以实时查看页面的时间,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.sof

BrowserSync,调试利器--自动刷新(转

---恢复内容开始--- 请想象这样一个场面:你开着两个显示器,一边是IDE里的代码,另一边是浏览器里的你正在开发的应用.此时桌上还放着你的手机,手机里也是这个开发中的应用.然后,你新写了一小段代码,按下了ctrl+s保存.紧接着,你的手机和另一个显示器里的应用,就变成了更新后的效果.你可以马上检查效果是否和你预想的一致,甚至都不需要动一下鼠标... 想起来还不错?嗯,这只是简单地省略掉那个开发过程中会按好多遍的F5刷新. 自动刷新 “自动刷新”并不是新的概念,但对关注“可见”的预览效果的前端开