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

chhkpiq4  于 2023-01-24  发布在  其他
关注(0)|答案(4)|浏览(213)

我通过file://协议在默认浏览器中查看本地HTML文件。
我想在HTML文件中添加一些代码/脚本,以便在文件发生变化时(理想情况下是在吸入的CSS文件发生变化时)浏览器刷新页面。
我尝试通过以下方式包括**Live.js**

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

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

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

但这不是我需要的我需要零钱。

jutyujz0

jutyujz01#

更通用的解决方案

单靠Javascript似乎不能解决这个问题,除非浏览器重新提供以前的支持,否则我不认为有一个完美的通用解决方案。
虽然我认为我以前的 Emacs 解决方案是一个很好的解决方案,但对于那些使用没有内置Web服务器的文本编辑器的人来说,这里有另一个更广泛的答案。

使用初始化等待

许多操作系统可以设置一个程序,在文件修改时执行,而不必轮询。没有一个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

先决条件:初始化等待和xdotool

你需要安装inotifywaitxdotool才能运行,在Debian GNU/Linux(以及Ubuntu和Mint的后代)上,你可以使用一个命令来获得这些程序:

sudo apt install inotify-tools xdotool

可选:使用 chrome

我建议使用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现在有一个名为X1 M3 N1 X的程序,这是X1 M4 N1 X的替代品。

lqfhib0f

lqfhib0f2#

Emacs不耐烦模式

在其中一条评论中,提问者提到他们使用Emacs文本编辑器。Emacs有一个简单的解决方案,可以在你输入时实时更新HTML(和CSS):Impatient Mode.
它使用EmacsWeb服务器提供一个带有Javascript的页面,该页面显示每次击键时的实时更新。

安装

如果您已经设置了MELPA,可以使用以下命令轻松安装不耐烦模式

M-x package-install

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

使用不耐烦模式

只有三个步骤:
1.运行一次:

M-x httpd-start

1.在正在编辑的任何HTML或CSS缓冲区中运行:

M-x impatient-mode

1.打开浏览器到http://localhost:8080/imp,然后单击缓冲区的名称。
现在,只需输入Emacs,就可以看到奇迹发生了!

用法旁注

我已经submitted a patch到不耐烦模式的维护者,当你运行M-x impatient-mode时,它会自动启动网络服务器并在你的浏览器中打开正确的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文件进行字节编译。

hsvhsicv

hsvhsicv3#

浏览器出于安全原因限制对file:///协议的访问。在Firefox中,即使是扩展也不再能够访问本地文件,因此您很可能必须在本地提供文件以使用实时重载脚本。如果您这样做,您可以只使用Live.js,但像this这样的东西可能设置起来稍微简单一些。(需要Node.js)

wrrgggsh

wrrgggsh4#

轻量级Web浏览器Gnome-Web(又名epiphany)在本地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”的任何修改都将自动显示。
Linux上的另一个替代品是“falkon”,我猜它是KDE等效的轻量级浏览器。

相关问题