堆栈内存溢出
  繁体   English   中英

当我在 Chrome 中保存对 html 文件的更改时自动重新加载浏览器？

[英]Auto-reload browser when I save changes to html file, in Chrome?

 原文  2011-04-07 23:06:05  4   29    vim/ google-chrome/ automation

问题描述

我正在 Vim 中编辑一个 HTML 文件，我希望浏览器在下面的文件更改时刷新。

谷歌浏览器是否有一个插件可以监听文件的更改并在我每次保存对文件的更改时自动刷新页面？ 我知道 Firefox 有 XRefresh，但我根本无法运行 XRefresh。

自己写一个脚本来做这件事有多难？

29 个解决方案

解决方案1
 132  2015-04-06 06:27:25

纯 JavaScript 解决方案！

Live.js

只需将以下内容添加到您的<head> ：

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

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

在哪里？ Live.js 可以在 Firefox、Chrome、Safari、Opera 和 IE6+ 中运行，除非另有证明。 Live.js 独立于您使用的开发框架或语言，无论是 Ruby、Handcraft、Python、Django、NET、Java、Php、Drupal、Joomla 还是您所拥有的。

我从这里几乎逐字复制了这个答案，因为我认为它比这里当前接受的答案更容易、更通用。

解决方案2
 36  2015-06-30 14:49:54

通过在文档中添加单个元标记，您可以指示浏览器以提供的时间间隔自动重新加载：

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

放置在文档的 head 标记内，此元标记将指示浏览器每三秒刷新一次。

解决方案3
 26  2016-09-21 19:31:51

假设您已经安装了 fswatch ( brew install fswatch )，适用于 OS X 的 Handy Bash one-liner。 它监视任意路径/文件并在发生更改时刷新活动的 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

解决方案4
 24  2019-07-16 19:38:28

我知道这是一个老问题，但如果它对某人有帮助，有一个reload npm 包可以解决它。

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

只需安装它：

npm install reload -g

然后在您的 index.html 目录中，运行：

reload -b

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

如果您在服务器或其他任何东西上运行它，还有许多其他选项。 查看参考以获取更多详细信息！

解决方案5
 23  2013-07-06 17:20:38

更新：Tincr 死了。

Tincr 是一个 Chrome 扩展程序，只要下面的文件发生更改，它就会刷新页面。

解决方案6
 23 已采纳  2011-04-07 23:55:58

我假设您不在OSX上？ 否则你可以用applescript做这样的事情：

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

还有一个名为“auto refresh plus”的 chrome 插件，您可以在其中指定每 x 秒重新加载一次：

https://chrome.google.com/webstore/detail/auto-refresh-plus/oilipfekkmncanaajkapbpancpelijih?hl=en

解决方案7
 12  2016-06-02 13:40:34

使用Gulp观看文件并使用Browsersync重新加载浏览器。

步骤是：

在命令行执行

npm install --save-dev gulp browser-sync

使用以下内容创建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 文件中即时注入特殊标记来完成的。

解决方案8
 10  2012-03-23 04:28:52

http://livereload.com/ - 适用于 OS X 的本机应用程序，适用于 Windows 的 Alpha 版本。 开源于https://github.com/livereload/LiveReload2

解决方案9
 6  2019-10-01 21:29:03

如果你在 GNU/Linux 上，你可以使用一个很酷的浏览器，叫做Falkon 。 它基于Qt WebEngine 。 它就像 Firefox 或 Chromium - 除了，它会在文件更新时自动刷新页面。 无论您使用 vim、nano 还是 atom、vscode、括号、geany、鼠标垫等，自动刷新都无关紧要。

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

sudo pacman -S falkon

这是快照包。

解决方案10
 5  2015-09-16 03:34:35

可以轻松地将LivePage Chrome扩展程序设置为监视本地文件中的更改。

解决方案11
 5  2021-06-22 18:42:20

以下几行可以解决问题：

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);

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

解决方案12
 3  2013-06-22 14:32:29

有一个用于 os x 和 Chrome 的 Java 应用程序，称为 Refreschro。 它将监视本地文件系统上的一组给定文件，并在检测到更改时重新加载 Chrome：

http://neromi.com/refreschro/

解决方案13
 2  2014-12-04 20:23:57

这对我有用（在 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软件包（ sudo apt-get install inotify-tools xdotool在 Ubuntu 中）并将--class的参数更改为您首选浏览器和终端的实际名称。

按照描述启动脚本，然后在浏览器中打开 index.html。 每次在 vim 中保存后，脚本都会聚焦浏览器的窗口，刷新它，然后返回终端。

解决方案14
 2  2019-03-21 06:40:18

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

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

解决方案15
 2  2021-01-24 12:01:31

如果您正在使用 Visual Studio 代码（我强烈推荐用于 Web 开发），Ritwick Dey 有一个名为Live Server的扩展，下载量超过 900 万。 安装就行（建议重启vs code之后），然后右击你的主HTML文件，会有一个“用Live Server打开”的选项，点击它，你的网站会自动在浏览器中打开本地服务器。

解决方案16
 1  2014-04-28 12:13:39

在 node.js 中，您可以将 primus.js (websockets) 与 gulp.js + gulp-watch （分别是任务运行器和更改侦听器）连接起来，以便 gulp 让您的浏览器窗口知道它应该在 html、js 时刷新等，改变。 这与操作系统无关，我让它在本地项目中工作。

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

解决方案17
 1  2014-09-18 04:01:06

我发现的最灵活的解决方案是chrome LiveReload 扩展与保护服务器配对。

查看项目中的所有文件，或仅查看您指定的文件。 这是一个示例 Guardfile 配置：

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

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

我也使用了 Tincr chrome 扩展——但它似乎与框架和文件结构紧密耦合。 （我尝试为 jekyll 项目连接 tincr，但它只允许我查看单个文件的更改，而不考虑包含、部分或布局更改）。 然而，Tincr 与具有一致和预定义文件结构的项目（如 rails）开箱即用效果很好。

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

解决方案18
 1  2016-02-17 10:30:58

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

  1. 使用pyinotify监控特定文件夹。
  2. 在启用调试的情况下使用 Chrome。 刷新可以通过 websocket 连接完成。

完整的细节可以参考这里。

解决方案19
 1  2017-08-17 10:02:13

基于 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意味着它将每个作为参数传递给osascript的新执行（它将被忽略）。

解决方案20
 1  2020-08-02 20:55:19

将此添加到您的 HTML

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

在编辑时，您的浏览器页面会变得模糊，通过切换回查看它，会触发焦点事件并重新加载页面。

解决方案21
 0  2016-05-21 07:23:17

安装和设置chromix

现在将它添加到你的.vimrc

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

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

解决方案22
 0  2019-03-22 12:37:45

好的，这是我粗略的Auto Hotkey解决方案（在 Linux 上，尝试Auto Key ）。 当按下保存键盘快捷键时，激活浏览器，单击重新加载按钮，然后切换回编辑器。 我只是厌倦了让其他解决方案运行。 如果您的编辑器自动保存，则不会工作。

^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

解决方案23
 0  2020-02-16 19:16:24

使用 R 的离线解决方案

此代码将：

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

  • 每次将更改保存到 .html 文件时，使浏览器刷新。

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

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

解决方案24
 0  2020-11-18 08:33:19

如果您的计算机上安装了 Node，那么您可以使用 light-server。

Setp 1：使用命令npm install -g light-server

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

第三步：在浏览器中打开网页 http://localhost:5000

在第 2 步中，

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

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

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

轻型服务器的文档位于https://www.npmjs.com/package/light-server

解决方案25
 0  2021-05-20 05:41:58

将此添加到您的“头部”部分。 将时间从 3000 毫秒更改为您喜欢的任何值。 每 3 秒重新加载 html 文件的小技巧。 当我使用 vim + 浏览器设置进行 JS 开发时，这对我很有用。

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

解决方案26
 0  2022-02-15 10:23:37

实时重新加载适用于 js 和 css 更改。 但是它不适用于 laravel 的刀片模板。 所以我写了一个小脚本来检查页面的变化，如果有变化就重新加载。 我不确定这是否是最好的方法，但它确实有效。 我将脚本与 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;
    }

解决方案27
 0  2022-03-04 14:31:10

只需使用实时服务器扩展并使用实时服务器打开文件。 扩展名实时服务器

解决方案28
 0  2022-03-31 07:53:24

实时重新加载浏览器页面

在此处输入图像描述

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

附加的功能

  • 实时自动刷新浏览器页面

  • 浏览器页面的自动 HTML 验证

  • Web开发过程中浏览器页面的实时告警

解决方案29
 -1  2017-09-21 02:25:28

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”

解决方案30
 -1  2018-11-25 07:51:54

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

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

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

这样做的目的是每 100 毫秒刷新一次页面。 您对代码所做的任何更改都立即可见。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我不带参数启动vim时仅自动重载会话 在 Vim 中保存文件之前可以看到更改吗？ 失去焦点时，vim自动保存当前文件 包裹不重新加载更改到 HTML 页面 使用Vim扩展名时如何在ESC上的VSCode中自动保存文件？ Sublime Text 2 - &gt; Vim，如何在Chrome中打开html文件？ 如何在退出时自动保存 vim session 并在启动时自动重新加载包括拆分 window state？ UltiSnips不会自动将更改重新加载到片段文件 Vim autocmd（保存文件，运行代码格式化程序，重新加载文件） 如何在vim中重新加载文件的属性而不会丢失更改
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM