2009-08-28 24 views
55

Firefoxの拡張機能、スクリプトやその他のメカニズムを知っている人は、1つ以上のローカルファイルを監視できます。 Firefoxはファイル内の(タイムスタンプの)変更を検出したときにキャンバスを自動的にリフレッシュまたは更新します。ファイルの変更時にFirefox自動更新を行うにはどうすればよいですか?

CSSを編集する場合、完全なHTML再レンダリングではなく、CSSだけを再読み込みできるのが理想的です。

効果的には、動的HTML/CSS編集でFirebugと同様の動作を可能にし、外部ファイルのみで動作します。

答えて

66

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、what-have-youなど、使用する開発フレームワークや言語とは独立しています。

IETesterを使用すると、開いている各IEタブが動的にリフレッシュされるという大きな利点があります。

あなた<head>

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

これは私がかなり長い時間を探してきたことであり、不思議に思っています!それは、ページの変更と保存を検出し、即座にページをリロードするので、変更するたびにページをリロードする必要がありません。共有のためのトンをありがとう! – Devner

+11

うわー、ありがとう!また、「Live.jsはファイルプロトコルをサポートしていません。それはhttp.'''を必要とします。 – antongorodezkiy

+2

私はPHPスクリプトとjsスクリプトを書いたので私を働かせませんでした。 JSスクリプトは毎秒PHPスクリプトを要求し、PHPスクリプトはファイルが変更されたかどうかをチェックします。彼らがそれをした場合、ページの声をリフレッシュすることを知ってください。どのエクステンションとどのディレクトリを見るかを指定することができます。プロジェクトには2つのファイルだけを置くだけで済みます。システムに依存関係やサードパーティ製のソフトウェアはありません。詳細:http://alexshulzhenko.ru/web-development-autorefresh-page-on-changes – Tebe

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

これはおそらくブックマークレットとして実装できますか? –

+0

はい、できます。 jQueryをページにロードする必要がありますが – Sampson

+1

@CharlesRoperこれはあなたが探していたブックマークレットです:http://www.pagereboot.com/ –

2

いくつかのIDEのこの能力を(彼らは保存のページを自動更新するためにそれらの中のペインまたはいくつかの他の手段があるでしょう)を含有することがあります。

これを自分で実行したい場合は、ページのmeta refreshを1〜2秒の低い値に設定します。

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

もし私が間違っていないなら、スクロールバーがあればページが飛び交うでしょう。 – Sampson

0

一定の間隔をあけた後、いくつかのajaxリクエストを使用して解決できると思います。あなたはCSSファイルへのリクエストを行うことができ、 "変更されていない"ヘッダーがない場合は、あなたのcssを削除して再度ロードします。動的ファイルの場合は、リクエストを行い、レスポンスを保存し、そのファイルにリクエストを行うたびにレスポンスを最新のものと比較します。

6

Xrefreshファイヤーバグ。

+1

Linux代替手段はありますか? –

+0

絶対に、私はそれを試していない:http://github.com/darwin/xrefresh。 – Alysko

+0

これはMac用のシェアウェアである[LiveReload](http://livereload.com/)によって置き換えられました:$ 10。それが他のプラットフォームでは無料かどうかは分かりません。私は別のコメントで提案されている無料の[Auto Reload](https://addons.mozilla.org/en-US/firefox/addon/auto-reload/)を使用しています。 – Blaise

4

FirefoxにはmozReplという拡張子があります。

Emacsはmoz-reload-on-save-modeでこれにプラグインできます。

このファイルを保存すると、ブラウザウィンドウが強制的に更新されます。ウェブサイトから

+0

そして、Vimについてはhttp://vim.wikiaで述べられています。com/wiki/Automatically_refresh_display_of_html_on_saving_file –

38

オートリロードは、ローカルファイルの変更を監視し、ブラウザを更新し、Firefox用の拡張機能であるに以下を追加して、それを試してみてください:

https://addons.mozilla.org/en-US/firefox/addon/auto-reload/

+3

このプラグインは素晴らしかったですが、悲しいことに、FF Quantumからサポートされることはもうありません。 –

5

私が推薦しますlivejs

しかし、異なるブラウザ(Live.jsは、Firefox、クロム、サファリ、オペラとIE6 +で動作します)

2.作品シームレス
1.簡単なセットアップ:利点デメリット

以下の利点を 3.デザインと一緒にデバッグするときにブラウザを特別にリフレッシュするための刺激間隔を追加しないでください。
4.変更を保存したときにのみリフレッシュしてください。ctrl + S
5. FirebugからCSSなどを直接保存します。私はその機能を使用していませんが、サイトで読むこともhttp://livejs.com/彼らもサポートしています!

短所:
1.これは、ステージング/生産を展開しながら、あなたがそれを削除する必要がhttp://localhost
3のようにそれを実行するサーバーを持っている必要があり、ファイルプロトコルfile:///C:/Users/Admin/Desktop/livejs/live.html
2上では動作しません
4.提供していませんCDN &私は直接のリンクhttp://livejs.com/live.jsを適用して不正行為を試みましたが、動作させるにはローカルで作業する必要はありません。

+0

は完全に機能します! – jpenna

1

Browsersyncこれはブラウザのサーバー側/外部から行うことができます。

これにより、あまりクリックする必要のない、より再現性の高い結果が得られます。

これはページを提供し、それはまた、スクリプトモードを可能に変化に

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

が更新されます。

関連する問題