如何使本地 HTML 页面在文件更改时自动刷新？

Question

我通过file://协议在默认浏览器中查看本地 HTML 文件。

我想向 HTML 文件添加一些代码/脚本，以便在更改文件时（最好是在更改吸入的 CSS 文件时）浏览器刷新页面。

我尝试通过包含Live.js

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

但它似乎对通过file://访问的文件没有任何影响。 - 任何已知的解决方案在这里有效吗？

PS 1：我发现了另一个与此问题相关的问题，但它没有解决本地文件的问题。

PS 2：我知道我可以通过以下方式定期重新加载页面

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

但这不是我需要的； 我需要重新加载更改。

Answer 1

Emacs 不耐烦模式

在其中一条评论中，提问者提到他们使用Emacs文本编辑器。 Emacs 有一个简单的解决方案，用于在您键入时实时更新 HTML（和 CSS）： Impatient Mode 。

它使用 Emacs Web 服务器来提供带有 Javascript 的页面，该页面显示每次击键时的实时更新。

安装

如果您已设置MELPA ，则可以轻松安装不耐烦模式

M-x package-install

或者，如果您更喜欢手动安装，请参阅下面的说明。

使用不耐烦模式

只需三个步骤：

1. 运行一次：

    Mx httpd-start

2. 在您正在编辑的任何 HTML 或 CSS 缓冲区中运行：

    Mx impatient-mode

3. 打开浏览器到http://localhost:8080/imp并单击缓冲区的名称。

现在，只需输入 Emacs 并观看神奇的发生！

使用说明

我已经向不耐烦模式的维护者提交了一个补丁，当您运行Mx impatient-mode时，该补丁会自动启动 Web 服务器并在浏览器中打开正确的 URL。 希望这会被接受，很快您只需一步即可完成所有工作。 如果发生这种情况，我将编辑此答案。

---

可选：手动安装

以下不是必需的，但有些人不希望将 MELPA 添加到他们的 Emacs 包存储库列表中。 如果是这种情况，您可以像这样安装不耐烦模式：

cd ~/.emacs.d
mkdir lisp
cd lisp
git clone https://github.com/skeeto/impatient-mode
git clone https://github.com/skeeto/simple-httpd
git clone https://github.com/hniksic/emacs-htmlize/

现在编辑您的.emacs文件，以便将 ~/.emacs.d/lisp/ 的子目录添加到加载路径：

;; Add subdirectories of my lisp directory. 
(let ((default-directory  "~/.emacs.d/lisp"))
     (normal-top-level-add-subdirs-to-load-path))
(autoload 'impatient-mode "~/.emacs.d/lisp/impatient-mode/impatient-mode" "\
Serves the buffer live over HTTP.

\(fn &optional ARG)" t nil)

这应该足以让不耐烦模式工作，但是如果您希望它稍微快一点，您可以对 emacs lisp 文件进行字节编译。

Answer 2

出于安全原因，浏览器会限制对file:///协议的访问。 在 Firefox 中，即使扩展程序也不再能够访问本地文件，因此您很可能必须在本地提供文件才能使用实时重新加载脚本。 如果你这样做，你可以只使用 Live.js，但像这样的设置可能会稍微简单一些。 （需要 Node.js）

Answer 3

更通用的解决方案

单靠 Javascript 似乎无法解决这个问题。 在浏览器重新支持他们过去这样做之前，我认为没有一个完美的通用解决方案。

虽然我认为我以前的Emacs解决方案是一个很好的解决方案，但对于使用没有内置 Web 服务器的文本编辑器的人来说，这是另一个更广泛的答案。

使用 inotifywait

许多操作系统可以设置一个程序，以便在文件被修改时执行而无需轮询。 没有一种适用于所有操作系统的 API，但 Linux 的inotify比大多数操作系统都要好，并且易于使用。

这是一个 shell 脚本，当在 HTML 和 CSS 文件所在的目录中运行时，它会告诉 Firefox 在保存更改时重新加载。 如果您希望它只观看几个文件，您也可以使用特定的文件名调用它。

#!/bin/bash
# htmlreload
# When an HTML or CSS file changes, reload any visible browser windows.
# Usage:
# 
#     htmlreload [ --browsername ] [ files ... ]
#
# If no files to watch are specified, all files (recursively) in the
# current working directory are monitored. (Note: this can take a long
# time to initially setup if you have a lot of files).
#
# An argument that begins with a dash is the browser to control.
# `htmlreload --chrom` will match both Chromium and Chrome.

set -o errexit
set -o nounset

browser="firefox"      # Default browser name. (Technically "X11 Class")
keystroke="CTRL+F5"    # The key that tells the browser to reload.

sendkey() {
    # Given an application name and a keystroke,
    # type the key in all windows owned by that application.
    xdotool search --all --onlyvisible --class "$1" \
        key --window %@ "$2"
}

# You may specify the browser name after one or more dashes (e.g., --chromium)
if [[ "${1:-}" == -* ]]; then
    browser="${1##*-}"
    shift
fi

# If no filenames given to watch, watch current working directory.
if [[ $# -eq 0 ]]; then
    echo "Watching all files under `pwd`"
    set - --recursive "`pwd`" #Added quotes for whitespace in path
fi

inotifywait --monitor --event CLOSE_WRITE "$@" | while read; do
    #echo "$REPLY"
    sendkey $browser $keystroke
done

先决条件：inotifywait 和 xdotool

您需要安装inotifywait和xdotool才能使其工作。 在 Debian GNU/Linux（及其后代，例如 Ubuntu 和 Mint）上，您可以使用单个命令获取这些程序：

sudo apt install inotify-tools xdotool

可选：使用 Chromium

我建议使用 Firefox，因为 Chromium（和 Chrome）在没有焦点的窗口中处理输入的方式很奇怪。 如果您绝对必须使用 Chromium，则可以改用此sendkey()例程：

sendkeywithfocus() {
    # Given an application name and a keystroke, give each window
    # focus and type the key in all windows owned by that application.

    # This is apparently needed by chromium, but is annoying because
    # whatever you're typing in your text editor shortly after saving
    # will also go to the chromium window. 

    # Save previous window id so we can restore focus.
    local current_focus="$(xdotool getwindowfocus)"

    # For each visible window, focus it and send the keystroke.
    xdotool search --all --onlyvisible --class "$1" \
        windowfocus \
        key --window %@ "$2"

    # Restore previous focus.
    xdotool windowfocus "$current_focus" 
}

可选：在 Wayland 工作

我还没有测试过，但读到 Wayland 现在有一个名为ydotool的程序，它是xdotool替代xdotool 。

Answer 4

轻量级 web 浏览器 Gnome-Web（又名顿悟）在修改本地 HTML 文件时自动更新。

# Either containerized for security:
sudo snap install epiphany
# or traditional, lightweight install directly into your host:
sudo apt install epiphany

# Then launch the browser on your html using file:// protocol
epiphany my-guide.html

...并且将自动显示对“my-guide.html”的任何修改。

Answer 5

也许我有点不高兴，但听起来这可以做到。

$(document).change(function(){
     location.reload();
});

Location.reload（）