整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
页编程之自动刷新。
各位同学好，今天我们来分享一下如何设置网页自动刷新和延时跳转。我们都知道，在浏览器中点击刷新按钮或者按下F5键可以刷新页面，但在编程中有时需要自动刷新页面，加载最新的数据，无需用户参与。这就是我们今天要讲的内容。
接下来让我们来看看效果如何。
·首先，在页面上添加了一个滚动字幕和一张GIF动画，用于展示页面的刷新状态。
·现在可以看到，每隔3秒自动刷新一次，每当刷新时，字幕会回到初始位置，动画也会重新播放。
·如果不明显，可以看到鼠标指到的位置会不停地触发刷新按钮，效果已经很明显了。
现在让我们来看看实现代码。自动刷新使用了meta标签的http-equiv属性，值为referesh，表示自动刷新。设置了content属性，在内容中填写秒数，即每隔多少秒自动刷新页面。如果设置为3，则每隔3秒自动刷新页面，非常简单。
·延时跳转的实现也很简单。刚才已经将Content属性设置为3，现在只需要指定要跳转到的URL。它的写法是在3后面加上一个英文分号，然后加上url等于要跳转到的地址。在这里，我们跳转到新浪首页，例如视频。这样写好后，回到浏览器保存，可以看到倒计时321，成功跳转。在指定时间后，浏览器会自动跳转，功能已经实现。
今天的分享就到这里，希望各位同学可以照着写3遍，做到不看视频也能写出来。所有案例和相关文档都可以向我索取。
我们下期再见，想学编程可以关注网页编程、服务端编程、数据库和算法方面的内容。
点赞支持一下。
为一名前端，开发web页面是我们的本职工作。在完成一个页面开发的过程中，保存代码然后手动刷新页面查看效果，这样的动作需要重复无数次，虽然一次这样的动作可能只要花费几秒钟的时间，但是次数多了也挺浪费时间的。
社区有一款工具可以帮助前端在每次保存完代码后自动刷新浏览器页面——livereload。
目前有很多的工具都内置了自动刷新功能，以下列举几个常见的。
这样的工具有很多，个人觉得最方便的要数puer，只要全局安装并在工程根目录下运行即可，效果如下。
图1
社区里大多数的自动刷新工具都是使用livereload实现的，下面我们就分析一下它的内部原理是什么？
阅读本节需要先了解服务器推送和文件修改监听，如果你还没有学习，可以先看看以下文章。
场景：当在编辑器中修改文件内容并保存时，浏览器自动刷新页面；
分析：监听文件的修改，并且把修改的动作通知浏览器。监听操作可以用chokidar模块完成，通知操作可以用websocket来做。
根据以上的分析，我们要搭建一个小服务器，这个服务器可以访问被修改的文件、监听文件修改以及与浏览器通信。
浏览器这边通过websocket接收服务器传来的指令来刷新页面内容，页面刷新的逻辑可以封装在livereload.js中，这是一个单独的js文件，可以由html文件引入。
整个流程如下图。
图2
1、服务端代码实现
1）搭建服务器
图3
启动图3中的服务，通过localhost:3000可以访问图左侧html和css两个文件，这两个文件代表需要开发的代码。
2）再搭建一个服务器，用于页面访问livereload.js
图4
此处用于图7中html引入livereload.js。
3）搭建websocket服务器
本文搭建websocket服务器不再一步步手写，而是直接采用ws模块，如下：
图5
图5中封装了一个send方法，用于向页面发送刷新通知。
4）监听代码文件的变化
图6
chokidar模块监听代码文件的变化，其监听的目录和参数配置可以自定义。filterRefresh调用了图5中定义的send函数，用于发送指令，指令的数据格式也可以自定义，只要页面能解析出来即可。
2、浏览器端代码实现
1）开发页面中引入livereload.js
图7
这一步在webpack、fis3等构建工具中都是自动化插入的，无需手动操作。
2）livereload.js中实现websocket连接
图8
此处页面接收来自服务器的指令，然后把它解析出来执行即可。核心指令当然是reload，但是不同的资源刷新的方式有所不同，下面会详细介绍。
3）直接刷新页面
图9
4）刷新chrome插件
图10
5）更新img标签中的图片
图11
document.images可以获取文档中所有图片的dom对象，将每个图片地址加一个版本号即可刷新。
这里获取的图片可能不是本次修改的，那么如何获取当前被修改的文件呢？
如果图片是自动刷新服务的资源，那么它的src应该是localhost:3000/图片的路径/图片名称。
图6中websocket传给页面的数据中包含了文件在代码目录下的路径，如果被监听的目录下的图片被修改，那么它的路径（/home/用户名/图片的路径/图片名称）和src会有一段重合的部分，反之，就不会有重合的部分。这里就用这个小技巧来排除不需要更新的图片。
6）更新行内样式中的背景图
图12
图13
document.querySelectorAll(`[style*=${selector}]`)可以获取拥有style属性的dom，然后通过dom对象的style属性可以获取style属性包含的样式，再通过具体的css样式属性就可以获取具体的样式的值，最后通过正则将背景图匹配出来并加上版本号。
图14
7）更新内嵌和外链样式中的背景图
图15
图16
document.styleSheets可以获取所有的内嵌和外链样式，再通过cssRules和style属性可以获取一组样式表，剩下的处理就和图13一致了。
注意：如果遇到了import或者媒体查询media，需要做递归获取样式表，这里就不再嗷述了。
8）更新外链样式（不包含import）
图17
document.getElementsByTagName('link')可以获取所有的外链css，通过path和href的对比可以过滤出本次修改的css文件，然后将外链css的href加上版本号并重新生成一个link标签插在之前外链样式之后，待新css资源加载完成就可以删除之前的css资源了。
8）更新外链中import中的样式
图18
document.querySelectorAll('link')[i].sheet.cssRules[i].href 这样的写法可以获取到import进来的css的url。
图20
浏览器自动刷新功能需要服务端和浏览器端配合实现，服务端的实现比较简单，最大的难点在于浏览器端对css的操作。如果每次只是暴力的刷新整个页面，不考虑对精准资源的刷新，可能无法保持页面中已存在的一些状态。
现在有条件的公司一般都会给程序员配备一台mac加一个大屏显示器，就像下面这样。
图21
一个屏幕打开编辑器，另外一个屏幕打开浏览器，保存代码后只要转一下头就能看见页面刷新，不用再在一个屏幕上切来切去，开发效率直线上升。
自动刷新的原理也是一个面试题，如果你理解了上面的实现原理，以后再碰见这道题，肯定so easy！
喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！
Web项目开发过程中，实现页面局部刷新和实时数据更新是一项常见的需求。Ajax（Asynchronous JavaScript and XML）技术为此提供了完美的解决方案，它能在不重新加载整个页面的情况下，通过JavaScript发送异步HTTP请求，获取服务器端数据并更新页面内容。本文将以Python Flask框架为例，介绍如何利用Ajax实现页面的一步刷新，并附带具体代码示例。
首先，我们需要在Flask后端设置一个处理Ajax请求的路由和视图函数，该函数返回需要更新的数据：
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/get_updates', methods=['GET'])
def get_updates():
# 假设此处是从数据库或其它来源获取最新数据
latest_data = fetch_latest_data()
return jsonify(latest_data)
在前端HTML中，我们需要一个元素来展示从服务器获取的数据，并编写JavaScript脚本来发起Ajax请求：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
function updateData() {
$.ajax({
url: '/get_updates',
type: 'GET',
success: function(response) {
// 更新页面元素
$('#data-display').html(response.some_field);
},
error: function(xhr, status, error) {
console.error('Failed to load data:', error);
}
});
}
// 初始加载
updateData();
// 定时刷新（例如每5秒一次）
setInterval(updateData, 5000);
});
</script>
</head>
<body>
<div id="data-display"></div>
</body>
</html>
上述代码中，我们使用了jQuery库简化Ajax请求的处理。$.ajax函数用于发送GET请求到’/get_updates’路由，当请求成功时，服务器返回的JSON数据会被用来更新页面上指定的HTML元素。
在实际应用场景中，除了定期刷新数据外，还可以根据特定事件触发Ajax请求，比如用户点击按钮、滚动页面等：
// 假设有一个按钮，点击时获取更新
$('#refresh-btn').click(function() {
updateData();
});
通过整合Flask后端与前端Ajax技术，我们可以轻松实现Web页面的实时刷新与局部更新，大大提升了用户体验和应用的响应速度。
关注我，手把手带你快速入门Python Web编程！
*请认真填写需求信息，我们会在24小时内与您取得联系。
