Html 如何让 Firefox 在文件更改时自动刷新？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1346716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make Firefox auto-refresh on file change?
提问by Charles Roper
Does anyone know of an extension for Firefox, or a script or some other mechanism, that can monitor one or more local files. Firefox would auto-refresh or otherwise update its canvas when it detected a change (of timestamp) in the files(s).
有谁知道可以监视一个或多个本地文件的 Firefox 扩展、脚本或其他机制。当 Firefox 检测到文件中的（时间戳）更改时，它会自动刷新或以其他方式更新其画布。
For editing CSS, it would be ideal if just the CSS could be reloaded, rather than a full HTML re-render.
对于编辑 CSS，最好只重新加载 CSS，而不是重新渲染完整的 HTML。
Effectively it would enable similar behaviour to Firebug with its dynamic HTML/CSS editing, only through external files.
有效地，它可以通过动态 HTML/CSS 编辑实现与 Firebug 类似的行为，仅通过外部文件。
回答by Charles Roper
From the website:
从网站：
How? Just include Live.js and it will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server. Changes to CSS will be applied dynamically and HTML or Javascript changes will reload the page. Try it!
Where? Live.js works in Firefox, Chrome, Safari, Opera and IE6+ until proven otherwise. Live.js is independent of the development framework or language you use, whether it be Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla or what-have-you.
如何？只需包含 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 还是您所拥有的。
It has the huge benefit of working with IETester, dynamically refreshing each open IE tab.
它具有与IETester一起使用的巨大好处，可动态刷新每个打开的 IE 选项卡。
Try it out by adding the following to your <head>
通过将以下内容添加到您的 <head>
<script type="text/javascript" src="http://livejs.com/live.js"></script>
回答by Aamir Shahzad
I would recommend livejs
But it has following Advantagesand Disadvantages
我会推荐livejs
但它有以下优点和缺点
Advantages:
1. Easy setup
2. Works seamlessly on different browsers (Live.js works in Firefox, Chrome, Safari, Opera and IE6+)
3. Don't add irritating interval for refreshing browser specially when you want to debug along with designing
4. Only refreshing when you save change ctrl + S
5. Directly saves CSS etc from firebug I have not used that feature but read on their site http://livejs.com/that they support it too!!!
优点：
1. 设置简单
2. 可以在不同浏览器上无缝工作（Live.js 在 Firefox、Chrome、Safari、Opera 和 IE6+ 下都有效）
3. 在调试和设计时，不要特别为刷新浏览器添加烦人的间隔
4 . 仅在保存更改时刷新ctrl + S
5. 直接从 firebug 中保存 CSS 等 我没有使用过该功能，但在他们的网站http://livejs.com/ 上看到他们也支持它！！！
Disadvantages:
1. It will not work on file protocol file:///C:/Users/Admin/Desktop/livejs/live.html
2. You need to have server to run it like http://localhost
3. You have to remove it while deploying on staging/production
4. Doesn't serves CDNI have tried cheating & applying direct link http://livejs.com/live.jsbut it will not work you have to download and keep on local to work.
缺点：
1. 它不适用于文件协议file:///C:/Users/Admin/Desktop/livejs/live.html
2. 你需要有服务器来运行它http://localhost
3. 你必须在部署/生产时删除它
4. 不提供CDN我试过作弊和应用直接链接http://livejs.com/live.js但它不起作用，您必须下载并继续在本地工作。
回答by nicorac
Have a look at FileWatcher extension: https://addons.mozilla.org/en-US/firefox/addon/filewatcher/
看看 FileWatcher 扩展：https: //addons.mozilla.org/en-US/firefox/addon/filewatcher/
- it's a WebExtension, so it works with the latest Firefox
- it has a native app (to be installed locally) that monitors watched files for changes using native OS calls (no polling!) and notifies the WebExtension to let it reload the web page
- reload is driven by rules: a rule contains the page URL (with regular expression support) and its included/excluded localsource files
- open source: https://github.com/coolsoft-ita/filewatcher
- 它是一个 WebExtension，所以它适用于最新的 Firefox
- 它有一个本机应用程序（将在本地安装），它使用本机操作系统调用（无轮询！）监视监视文件的更改，并通知 WebExtension 让它重新加载网页
- 重新加载由规则驱动：规则包含页面 URL（具有正则表达式支持）及其包含/排除的本地源文件
- 开源：https: //github.com/coolsoft-ita/filewatcher
DISCLAIMER: I'm the author of the extension ;)
免责声明：我是扩展的作者;)
回答by bob
Firefox has an extension called mozRepl.
Firefox 有一个名为 mozRepl 的扩展。
Emacs can plug into this, with moz-reload-on-save-mode.
Emacs 可以插入这个，使用 moz-reload-on-save-mode。
when it's set up, saving the file forces a refresh of the browser window.
设置后，保存文件会强制刷新浏览器窗口。
回答by Sampson
You could just place a javascript interval on your page, have it query a local script which checks the last date modified of the css file, and refreshes it if it changed.
您可以在页面上放置一个 javascript 间隔，让它查询一个本地脚本，该脚本检查 css 文件的最后修改日期，并在更改时刷新它。
jQuery Example:
jQuery 示例：
var modTime = 0;
setInterval(function(){
$.post("isModified.php", {"file":"main.css", "time":modTime}, function(rst) {
if (rst.time != modTime) {
modTime = rst.time;
// reload style tag
$("head link[rel='stylesheet']:eq(0)").remove();
$("head").prepend($(document.createElement("link")).attr({
"rel":"stylesheet",
"href":"http://sstatic.net/mso/all.css?v=4372"
})
);
}
});
}, 5000);
回答by Mike Buckbee
There are some IDE's that contain this ability (They'll have a pane within them or some other means to auto-refresh a page on save).
有一些 IDE 包含此功能（它们将包含一个窗格或其他一些在保存时自动刷新页面的方法）。
If you want to do this yourself a quick hack is to set the meta refreshon the page to a low value - one or two seconds.
如果你想自己做这件事，一个快速的技巧是将页面上的元刷新设置为一个较低的值 - 一两秒。
# Will refresh the page content every second
<meta http-equiv="refresh" content="1" />
回答by Att Righ
Browsersynccan do this from the server side / outside of the browser.
Browsersync可以从服务器端/浏览器外部执行此操作。
This can achieve more repeatable results / things that don't require so much clicking.
这可以实现更多可重复的结果/不需要太多点击的东西。
This will serve a page and refresh on change
这将提供一个页面并在更改时刷新
cd static_content
browser-sync start --server --files .
It also allows a scripting mode.
它还允许脚本模式。
回答by weirane
You can use live.jswith a tampermonkeyscript to avoid having to include https://livejs.com/live.jsin your HTML file.
您可以将live.js与tampermonkey脚本一起使用，以避免必须包含https://livejs.com/live.js在您的 HTML 文件中。
// ==UserScript==
// @name Auto reload
// @author weirane
// @version 0.1
// @match http://127.0.0.1/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
if (Number(window.location.port) === 8000) {
const script = document.createElement('script');
script.src = 'https://livejs.com/live.js';
document.body.appendChild(script);
}
})();
With this tampermonkey script, the live.js script will be automatically inserted to pages whose address matches http://127.0.0.1:8000/*. You can change the port according to your need.
使用这个 tampermonkey 脚本，live.js 脚本将自动插入到地址匹配的页面中http://127.0.0.1:8000/*。您可以根据需要更改端口。
回答by mck89
I think that you can solve it by using some ajax requests after a determinate interval. You can do a request to CSS files and then if you don't get the "not modified" header you delete your css and load it again. For dynamic files you do a request and store the response and then every time you make a request to that file you compare the response to the latest.
我认为您可以通过在确定的时间间隔后使用一些 ajax 请求来解决它。您可以向 CSS 文件发出请求，然后如果您没有收到“未修改”标题，则删除您的 css 并重新加载它。对于动态文件，您发出请求并存储响应，然后每次向该文件发出请求时，将响应与最新响应进行比较。
