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

时间:2018-02-19 02:20:36

标签: javascript html page-refresh local-files

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

我想在HTML文件中添加一些代码/脚本,以便在更改文件时(理想情况下更改被吸入的CSS文件)浏览器刷新页面。

我尝试通过

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

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

PS 1:我找到another question relating to this problem,但它没有解决本地文件案例。

PS 2:我知道我可以通过

定期重新加载页面
<meta http-equiv="refresh" content="1">

但这不是我需要的;我需要重新加载。

4 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

Emacs不耐烦模式

在其中一条评论中,提问者提到他们使用了Emacs文本编辑器。 Emacs提供了一种简单的解决方案,可在您输入Impatient Mode时实时更新HTML(和CSS)。

它使用Emacs Web服务器为包含Javascript的页面提供服务,该页面显示每个按键的实时更新。

安装

如果您已设置MELPA,则可以使用以下方式轻松安装“不耐烦模式”

M-x package-install

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

使用不耐烦模式

只有三个步骤:

  1. 运行一次:

    M-x httpd-start
    
  2. 在您正在编辑的任何HTML或CSS缓冲区中运行:

    M-x impatient-mode
    
  3. 打开浏览器至http://localhost:8080/imp,然后单击缓冲区的名称。

现在,只需输入Emacs并观看魔术发生!

用法注释

我已经向“不耐烦模式”的维护者提交了一个补丁,该补丁可以在运行M-x 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文件进行字节编译。

答案 2 :(得分:0)

更通用的解决方案

仅Java脚本似乎无法解决此问题。除非浏览器重新添加他们过去曾经为此提供的支持,否则我认为没有完美的通用解决方案。

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

使用inotifywait

许多OS都可以将程序设置为在修改文件时执行,而无需轮询。没有适用于所有操作系统的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`
fi

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

先决条件:inotifywait和xdotool

您需要安装inotifywaitxdotool才能正常工作。在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

答案 3 :(得分:-2)

也许我有点偏离,但听起来这可以做到。

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

Location.reload()