如何使Firefox在文件更改时自动刷新?


73

有谁知道可以监视一个或多个本地文件的Firefox扩展,脚本或其他某种机制。当Firefox在文件中检测到(时间戳)更改时,它将自动刷新或以其他方式更新其画布。

对于编辑CSS,理想的情况是仅重新加载CSS,而不是重新渲染完整的HTML。

实际上,仅通过外部文件,它就可以通过动态HTML / CSS编辑来实现与Firebug类似的行为。

Answers:


85

Live.js

从网站:

怎么样?仅包含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还是您所需要的。

IETester一起使用具有巨大的好处,可以动态刷新每个打开的IE选项卡。

通过将以下内容添加到 <head>

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

这是我一直在寻找很长一段时间的方法,它的工作原理令人惊奇!!!它检测到页面的更改并保存并立即重新加载页面,这为我节省了很多时间,而我每次进行更改时都不必重新加载页面!多谢分享!
Devner

23
哇谢谢!对于所有使用它的人,请注意Live.js doesn't support the file protocol. It needs http.
antongorodezkiy 2014年

2
没有用我,所以我写了php脚本和js脚本。JS脚本每N秒钟向php脚本发出一次请求,并且php脚本检查文件是否被更改。如果他们这样做了,请告诉js该页面应该刷新。您可以指定要扩展的扩展名和目录。您只需要在项目中放入两个文件即可。您的系统中没有依赖项,也没有第三方软件。更多详细信息:alexshulzhenko.ru/web-development-autorefresh-page-on-changes
Tebe

@antongorodezkiy是的,但是可以通过从内部加载HTML来进行简单的处理python -m SimpleHTTPServer
bluenote10 '16

为什么我花了这么长时间才能得到这个答案!
Sau001

9

看看FileWatcher扩展:https : //addons.mozilla.org/en-US/firefox/addon/filewatcher/

  • 这是一个WebExtension,因此可以与最新的Firefox一起使用
  • 它有一个本机应用程序(将在本地安装),该应用程序使用本机OS调用监视观看的文件的更改(无轮询!),并通知WebExtension以使其重新加载网页
  • 重新加载由规则驱动:规则包含页面URL(支持正则表达式)及其包含/排除的本地源文件
  • 开源:https : //github.com/coolsoft-ita/filewatcher

免责声明:我是扩展名的作者;)


8

我会推荐livejs

但它具有以下优点缺点

优点:
1.设置简单
2.在不同的浏览器上无缝运行(Live.js在Firefox,Chrome,Safari,Opera和IE6 +中运行)
3.不必添加烦人的间隔来刷新浏览器,特别是当您要调试和设计
4时。仅在保存更改时刷新ctrl + S
5.直接从firebug中保存CSS等我没有使用过该功能,但在其网站http://livejs.com/上阅读了他们也支持的功能!

缺点:
1.它不能在文件协议file:///C:/Users/Admin/Desktop/livejs/live.html
上运行2.您需要让服务器像这样运行它http://localhost
3.在临时/生产环境中部署时必须将其删除
4.不提供CDN我尝试作弊并应用直接链接http://livejs.com/live.js,但是您必须下载并保持本地运行才能正常使用。


缺点#1和#2对我来说还可以。#3可以在条件包含服务器端轻松解决(仅在domain = localhost的情况下才包含)。但比所有这些更糟糕的是:我无法在本地EasyPhp开发人员安装上运行它:ETag和Last-Modified头文件似乎都没有在文件更新时更改:-(
fpierrat



4

有一些IDE包含此功能(它们内部将有一个窗格,或通过其他方式在保存时自动刷新页面)。

如果您想自己执行此操作,快速的技巧是将页面上的元刷新设置为低值-一或两秒。

# Will refresh the page content every second
<meta http-equiv="refresh" content="1" />

如果我没记错的话,这将导致页面在具有滚动条的情况下跳转。
桑普森

4

您可以在页面上放置一个javascript间隔,让它查询一个本地脚本,该脚本检查css文件的最后修改日期,并在更改后刷新它。

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

是的,肯定可以。尽管这需要将jQuery加载到页面上。
桑普森

1
@CharlesRoper这是您正在寻找的书签:pagereboot.com
Evan Moran

3

Browsersync可以从服务器端/浏览器外部执行此操作。

这样可以实现更多可重复的结果/不需要太多单击的事情。

这将提供一个页面并在更改时刷新

cd static_content
browser-sync start --server --files .

它还允许脚本模式。


1

您可以将live.jstampermonkey脚本一起使用,以避免必须将其包含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);
    }
})();

使用此tampermonkey脚本,live.js脚本将自动插入地址匹配的页面http://127.0.0.1:8000/*。您可以根据需要更改端口。


这看起来是最直接的答案。但是,将其添加到我的flask应用程序中会导致多个调用被发送到后端,错误提示该函数未返回有效响应。我认为脚本需要将某些内容传递给后端才能正常工作。
David Frick

0

我认为您可以通过在确定的时间间隔后使用一些ajax请求来解决此问题。您可以对CSS文件进行请求,然后,如果未获得“未修改”标头,则删除CSS,然后重新加载。对于动态文件,您会发出请求并存储响应,然后每次对文件进行请求时,都会将响应与最新响应进行比较。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.