17

ページをリロードせずに、JavaScript を使用して HTML ページのすべての CSS スタイルシートをリロードしたいと考えています。

これは、常にページを更新せずに CSS の変更を反映するように開発しているときにのみ必要です。

考えられる解決策は、javascript を使用して css hrefs にサフィックスを追加すること?id=randomnumberですが、私はそうしたくありません。

URLを変更せずに何らかの方法でスタイルシートをリロードしたいのですが、ブラウザはそのcssの新しいバージョンをロードする必要があるかどうかを判断します(サーバーが で応答する場合304 - Not modified)。

これを達成する方法は？

4

5 に答える 5

12

プレーンな 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 ツリーがロードされた後に、この関数をロードするようにしてください。

于 2012-12-05T10:37:27.737 に答える
5

まず、次のようにスタイルシート リンク タグに 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 つまたは一連のスタイルシートのみをターゲットにしたい場合は、これを使用できます。

于 2014-01-30T05:12:50.447 に答える
3

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

これは、常にページを更新せずに CSS の変更を反映するように開発しているときにのみ必要です。

1 つの方法は、Grunt.jsを使用してファイルの変更を監視し、ページをライブリロードすることです。

ワークフローは次のようになります。

  • css ドキュメントを保存
  • Grunt ウォッチが変化を確認
  • ページの 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/

于 2013-09-11T17:27:40.657 に答える
0

Grunt の代わりにPreprosを使用することもできます。

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

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

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

于 2015-10-03T12:27:15.523 に答える
0

GoogleChrome ブラウザでは非常に簡単です。

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

ここに画像の説明を入力

ここに画像の説明を入力

于 2013-09-11T17:54:32.730 に答える