web-dev-qa-db-ja.com

JavaScriptでCSSスタイルシートをリロードする

ページをリロードせずに、JavaScriptを介してHTMLページ内のすべてのCSSスタイルシートをリロードしたい。

これは、常にページを更新せずにcssの変更を反映するために開発中にのみ必要です。

可能な解決策は、?id=randomnumber css hrefsにjavascriptを付けたサフィックスですが、私はそれをしたくありません。

スタイルシートをURLを変更せずに何らかの方法で再ロードしたいのですが、ブラウザはそのCSSの新しいバージョンをロードする必要があるかどうかを決定します（サーバーが304 - Not modified）。

これを達成する方法は？

javascriptjqueryhtmlcssdom
16
Tamás Pap

プレーンJavascriptの場合：

var links = document.getElementsByTagName("link");

for (var x in links) {
    var link = links[x];

    if (link.getAttribute("type").indexOf("css") > -1) {
        link.href = link.href + "?id=" + new Date().getMilliseconds();
    }
}

JQueryの場合：

$("link").each(function() {
    if $(this).attr("type").indexOf("css") > -1) {
        $(this).attr("href", $(this).attr("href") + "?id=" + new Date().getMilliseconds());
    }
});

DOMツリーがロードされた後に、必ずこの関数をロードしてください。

10
Dillen Meijboom

まず、スタイルシートのリンクタグに次のようにID（存在しない場合）を追加します。

<link id="mainStyle" rel="stylesheet" href="style.css" />

次に、Javascript（jQueryも使用）で次の関数を追加します。

function freshStyle(stylesheet){
   $('#mainStyle').attr('href',stylesheet);
}

最後に、目的のイベントで関数をトリガーします。

$('#logo').click(function(event){
    event.preventDefault();
    var restyled = 'style.css'; 
    freshStyle(restyled);
});

リンクされたスタイルシートの値を更新することにより、たとえそれが同じ値であっても、クライアントに強制的に再表示させることができます。実行すると、最新のファイルが表示され、（再）ロードされます。

キャッシュの問題が発生している場合は、次のようにファイル名にランダムな（疑似）バージョン番号を追加してみてください。

var restyled = 'style.css?v='+Math.random(0,10000);

お役に立てれば。上記のDillenの例も機能しますが、わずかな調整を加えた1つまたは一連のスタイルシートのみをターゲットにする場合は、これを使用できます。

5
ChongFury

達成するためのはるかに良い方法があります：

これは、常にページを更新せずにcssの変更を反映するために開発中にのみ必要です。

1つの方法は、ファイルの変更に Grunt.js から watch を使用し、次に livereload ページを使用することです。

ワークフローは次のとおりです。

  • CSSドキュメントを保存
  • グラントウォッチは変化を見ます
  • ページ上のCSSをライブで再読み込み

これを{sass | less | stylus}プリプロセッサコンパイルなどの他のGrunt関数とチェーンして、次のようなワークフローを作成できます。

  • sassファイルを保存する
  • 変化が見える
  • sassはコンパイルされ、cdnの場所に縮小されます
  • 新しいCSSがページに読み込まれます

その他のフロントエンド自動化リソース：

Google社員のビデオ： http://www.youtube.com/watch?v=bntNYzCrzvE

http://sixrevisions.com/javascript/grunt-tutorial-01/

http://aboutcode.net/vogue/

3
Michael Jasper

Google Chromeブラウザーでは非常に簡単です。

F12キーを押し、右下隅にある歯車をクリックして、[キャッシュを無効にする]オプションを選択します（DevToolsが開いている間）。

enter image description here

enter image description here

0
Warlock

Gruntの代替は Prepros を使用することです。

また、プロジェクトフォルダーのファイルウォッチャーを使用しますが、すべてのファイルに使用します。 （js、css、php）、すべての変更でページをリロードします。 （+これがcssのような小さな視覚的な変更である場合、ページが更新されず、スムーズに移行します。（色、配置などで機能します））

Gruntと同様に、ファイルをコンパイルして縮小し、指定したURL（localhostだけでなく）でライブプレビューを作成できます。 （機能はもっとたくさんあります）

特別なポートを使用して、クリック、clic、マウスホイール、入力などのイベントを同期します。

0
Humbertda