小开

最佳答案

我假设你不在 OSX 上，否则你可以用苹果脚本做这样的事情:

Http://brettterpstra.com/watch-for-file-changes-and-refresh-your-browser-automatically/

还有一个叫做“自动刷新 +”的 chrome 插件，你可以指定每 x 秒重新加载一次:

Https://chrome.google.com/webstore/detail/auto-refresh-plus-page-mo/hgeljhfekpckiiplhkigfehkdpldcggm?hl=en

小开

开源 http://livereload.com/ : http://github.com/livereload/liveReload2”rel = “ norefrer”> https://github.com/livereload/livereload2

小开

有一个用于 OS x 和 Chrome 的 java 应用叫 Refreschro。它将监视本地文件系统中的一组给定文件，并在检测到更改时重新加载 Chrome:

Http://neromi.com/refreschro/

小开

更新 : Tincr 死了。

Tincr 是一个 Chrome 扩展，当下面的文件发生变化时，它会刷新页面。

小开

在 node.js 中，你可以将 primus.js (websockets)与 Gulp.js + Gulp-watch (分别是任务运行器和更改监听器)连接起来，这样 Gulp 可以让你的浏览器窗口知道它应该在 html、 js 等更改时刷新。这是不可知的操作系统，我有它在一个本地项目的工作。

在这里，页面是由 Web 服务器提供的，而不是作为文件从磁盘加载，这实际上更像是真实的东西。

小开

我发现的最灵活的解决方案是 Chrome LiveRelload 扩展与警卫服务器配对。

观察项目中的所有文件，或者只观察您指定的文件:

guard 'livereload' do
watch(%r{.*\.(css|js|html|markdown|md|yml)})
end

缺点是您必须为每个项目设置这个，如果您熟悉 Ruby，它会有所帮助。

我也使用过 Tincr chrome 扩展，但它似乎与框架和文件结构紧密耦合。(我尝试为一个 Jekyll 项目连接 tincr，但它只允许我观察一个文件的更改，而不考虑包含、部分或布局更改)。然而，Tincr 可以很好地开箱即用，例如使用具有一致性和预定义文件结构的 Rail 这样的项目。

如果 Tincr 允许重新加载所有包含的匹配模式，那么 Tincr 将是一个很好的解决方案，但是该项目的特性集仍然有限。

小开

这对我很有用(在 Ubuntu 中) :

#!/bin/bash
#
# Watches the folder or files passed as arguments to the script and when it
# detects a change it automatically refreshes the current selected Chrome tab or
# window.
#
# Usage:
# ./chrome-refresher.sh /folder/to/watch


TIME_FORMAT='%F %H:%M'
OUTPUT_FORMAT='%T Event(s): %e fired for file: %w. Refreshing.'


while inotifywait --exclude '.+\.swp$' -e modify -q \
-r --timefmt "${TIME_FORMAT}" --format "${OUTPUT_FORMAT}" "$@"; do
xdotool search --onlyvisible --class chromium windowactivate --sync key F5 \
search --onlyvisible --class gnome-terminal windowactivate
done

您可能需要安装 Inotify和 Xdotool软件包(Ubuntu 中的 sudo apt-get install inotify-tools xdotool) ，并将 --class的参数更改为您首选的浏览器和终端的实际名称。

按照上述方法启动脚本，然后在浏览器中打开 index.html。每次在 vim 中保存之后，脚本将聚焦浏览器窗口，刷新它，然后返回到终端。

小开

纯 JavaScript 解决方案！

Live.js

只需在你的 <head>中加入以下内容:

<script type="text/javascript" src="https://livejs.com/live.js"></script>

怎么做到的？只要包含 Live.js，它就会通过向服务器发送连续的 HEAD 请求来监视当前页面，包括本地 CSS 和 Javascript。CSS 的更改将被动态应用，HTML 或 Javascript 的更改将重新加载页面。试试看！

在哪里？ Js 可以在 Firefox、 Chrome、 Safari、 Opera 和 IE6 + 中运行，除非被证明不是这样。Js 独立于你使用的开发框架或语言，不管是 Ruby、 Handcraft、 Python、 Django、 NET、 Java、 Php、 Drupal、 Joomla 还是其他什么。

我几乎是一字不差地抄袭了给你的答案，因为我认为这比目前接受的答案要简单和笼统得多。

小开

通过在文档中添加一个 meta 标记，您可以指示浏览器按照提供的时间间隔自动重新加载:

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

放置在文档的 head 标记中，这个 meta 标记将指示浏览器每三秒刷新一次。

小开

这可以通过使用一个简单的 python 脚本来完成。

使用 Pyinotify监视特定文件夹。
使用启用了调试的 Chrome。刷新可以通过 websocket 连接完成。

详情可参阅给你。

小开

安装并设置 chromix

现在把这个加到你的 .vimrc

autocmd BufWritePost *.html,*.js,*.css :silent ! chromix with http://localhost:4500/ reload

将端口更改为您使用的端口

小开

使用咕噜监视文件，使用浏览器同步重新加载浏览器。

步骤如下:

在命令行中执行

Npm install —— save-dev Gulp 浏览器同步

创建包含以下内容的 Gulpfile.js:

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;


gulp.task('serve', function() {
browserSync.init({
server: {
baseDir: "./"
}
});


gulp.watch("*.html").on("change", reload);
});

快跑

一口吞下

编辑 HTML，保存并查看浏览器重新加载。这种神奇的方法是通过在 HTML 文件中动态注入特殊标记来实现的。

小开

假设您已经安装了 fswatch (brew install fswatch) ，用于 OSX 的 Handy Bash 一行程序。它监视一个任意的路径/文件，并在有变化时刷新活动的 Chrome 选项卡:

fswatch -o ~/path/to/watch | xargs -n1 -I {} osascript -e 'tell application "Google Chrome" to tell the active tab of its first window to reload'

点击这里查看更多关于 fswatch 的信息: https://stackoverflow.com/a/13807906/3510611

小开

基于 Attekei 对 OSX 的回答:

$ brew install fswatch

把这些都放进 reload.scpt:

function run(argv) {
if (argv.length < 1) {
console.log("Please supply a (partial) URL to reload");
return;
}
console.log("Trying to reload: " + argv[0]);
let a = Application("Google Chrome");
for (let i = 0; i < a.windows.length; i++) {
let win = a.windows[i];
for (let j = 0; j < win.tabs.length; j++) {
let tab = win.tabs[j];
if (tab.url().startsWith("file://") && tab.url().endsWith(argv[0])) {
console.log("Reloading URL: " + tab.url());
tab.reload();
return;
}
}
}
console.log("Tab not found.");
}

这将重新加载它找到的以 file://开始并以第一个命令行参数结束的第一个选项卡。您可以根据需要进行调整。

最后，做这样的事情。

fswatch -o ~/path/to/watch | xargs -n1 osascript -l JavaScript reload.scpt myindex.html

fswatch -o输出每个更改事件中更改的文件数，每行一个。通常它只会打印 1。xargs读取这些 1，而 -n1意味着它将每个 1作为参数传递给 osascript的新执行(在这里它将被忽略)。

小开

pip install https://github.com/joh/when-changed/archive/master.zip


alias watch_refresh_chrome=" when-changed -v -r -1 -s ./ osascript -e 'tell application \"Google Chrome\" to tell the active tab of its first window to reload' "

然后输入要监视的目录，执行“ watch _ refresh _ chrome”

小开

(function() {
setTimeout(function(){
window.location.reload(true);
}, 100);
})();

将此代码保存到文件 Livereload.js中，并将其包含在 HTML 脚本的底部，如下所示:

<script type="text/javascript" src="livereload.js"></script>

这样做的目的是每100毫秒刷新一次页面。您在代码中所做的任何更改都可以立即用眼睛看到。

小开

我有时使用的一个快速解决方案是将屏幕分为 2，每次进行更改时，单击文档 xD。

<script>
document.addEventListener("click", function(){
window.location.reload();
})
</script>

小开

好的，这是我粗糙的自动热键解决方案(在 Linux 上，尝试自动钥匙)。当按下拯救快捷键时，激活浏览器，单击 重新装弹按钮，然后切换回编辑器。我只是厌倦了让其他解决方案运行。如果编辑器进行自动保存，则无法工作。

^s::   ; '^' means ctrl key. '!' is alt, '+' is shift. Can be combined.
MouseGetPos x,y
Send ^s


; if your IDE is not that fast with saving, increase.
Sleep 100


; Activate the browser. This may differ on your system. Can be found with AHK Window Spy.
WinActivate ahk_class Chrome_WidgetWin_1
WinWaitActive ahk_class Chrome_WidgetWin_1
Sleep 100   ; better safe than sorry.


;~ Send ^F5   ; I dont know why this doesnt work ...
Click 92,62   ; ... so lets click the reload button instead.


; Switch back to Editor. Can be found with AHK Window Spy.
WinActivate ahk_class zc-frame
WinWaitActive ahk_class zc-frame
Sleep 100   ; better safe than sorry.


MouseMove x,y
return

小开

我知道这是一个老问题，但如果它有助于某人，有一个重新装弹 npm 软件包解决它。

如果您没有在服务器上运行它，或者收到了错误 Live.js doesn't support the file protocol. It needs http.

只要安装它:

npm install reload -g

然后在 index.html 目录下运行:

reload -b

它将启动一个服务器，该服务器将在您每次保存更改时刷新。

如果您在服务器或其他地方运行它，还有许多其他选项。更多细节请查阅参考资料！

小开

如果你使用 GNU/Linux，你可以使用一个很酷的浏览器法拉肯。它是基于网络引擎的。它就像 Firefox 或 Chromium 一样——只不过，当文件更新时，它会自动刷新页面。无论你使用 vim、 nano 还是 atom、 vscode、括号、 geany、鼠标垫等，自动刷新功能都无关紧要。

在 Arch Linux 上，你可以很容易地安装 Falkon:

sudo pacman -S falkon

下面是快照包。

小开

使用 R 的离线解决方案

此代码将:

使用给定的. html-file 设置本地服务器
返回服务器地址，以便您可以在浏览器中观看它。

每次将更改保存到. html-file 时，使浏览器刷新。

install.packages("servr")
servr::httw(dir = "c:/users/username/desktop/")

对于 python 等也存在类似的解决方案。

小开

将此添加到 HTML 中

<script> window.addEventListener('focus', ()=>{document.location = document.location})</script>

当您编辑时，您的浏览器页面是模糊的，通过切换回来查看它，焦点事件被激发，页面重新加载。

小开

如果在计算机上安装了 Node，则可以使用 light-server。

步骤1: 使用命令 npm install -g light-server安装 light-server

步骤2: 当前工作目录是包含静态 HTML 页面的文件夹，使用命令 npx light-server -s . -p 5000 -w "*.css # # reloadcss" -w "*.html # # reloadhtml" -w "*.js # # reloadhtml"启动 light-server

第三步: 以浏览器 http://localhost:5000打开网页

在第二步,

端口可以使用-p 开关更改

正在监视的文件可以使用 -w 开关进行更改

可以使用-s 开关更改服务器目录

Light-server 的文档位于 https://www.npmjs.com/package/light-server

小开

如果您正在使用可视化工作室代码(我强烈推荐 Web 开发) ，有一个由 Ritwick Dey 提供的名为 现场服务器的扩展，下载量超过900万。只要安装它(建议重新启动后，与代码) ，然后只需右键单击您的主要 HTML 文件，将有一个选项“打开与 Live 服务器”，单击它，您的网站将自动打开在浏览器上的本地服务器。

小开

把这个加到你的“头部”部分。将时间从3000毫秒改为您喜欢的任何值。一个小黑客重新加载 html 文件每3秒钟。当我使用 vim + 浏览器安装 JS 开发时，这对我很有用。

    <script>
function autoreload() {
location.reload();
}
setInterval(autoreload, 3000);
</script>

小开

以下几句话可以达到效果:

var bfr = '';
setInterval(function () {
fetch(window.location).then((response) => {
return response.text();
}).then(r => {
if (bfr != '' && bfr != r) {
window.location.reload();
}
else {
bfr = r;
}
});
}, 1000);

这会在每秒后将当前响应文本与以前缓冲的响应文本进行比较，如果源代码发生任何更改，将重新加载页面。你不需要任何重型插件，如果你只是开发轻量级页面。

小开

动态重载在 js 和 css 更改上运行良好。然而，它并不适用于幼虫的刀片模板。因此，我编写了一个小脚本，用于检查页面更改，并在发生更改时重新加载。我不确定这是否是最好的方法，但它确实有效。我和 Live.js 一起使用了这个脚本。

就是这个。

    window.addEventListener("load", function(){
var current_url = window.location.href;
var current_data = httpGet(current_url);
var compone = current_data.length;
setInterval(function(){
var current_data_twos = httpGet(current_url);
var componecurrent_data_twos = current_data_twos.length;
if(compone !=componecurrent_data_twos ){
location.reload();
}
}, 1000);
});
function httpGet(theUrl)
{
let xmlhttp;


if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
return xmlhttp.responseText;
}
}
xmlhttp.open("GET", theUrl, false);
xmlhttp.send();
return xmlhttp.response;
}

小开

只需使用 Live 服务器扩展名并打开名为 Live server.ext.name现场服务器的文件即可

小开

实时重新加载浏览器页

Live Relload Browser Page -tool 2022，用于为 Google Chrome 实时自动刷新浏览器页面。

附加功能

自动实时刷新浏览器页面
浏览器页面的自动 HTML 验证
网页开发过程中浏览器页面的实时警报

在 Chrome 中保存 html 文件时自动重载浏览器？

实时重新加载浏览器页