web-dev-qa-db-ja.com

ページをリロードせずにcssをリロードする簡単な方法はありますか？

私は、ページをリロードすることなくスタイルシートをリロードして適用するプレビュー機能を備えたライブのページ内CSSエディターを作成しようとしています。これについて最善の方法は何でしょうか？

javascriptcssstylesheetreload
81
Stephen Belanger

「編集」ページで、通常の方法でCSSを含める代わりに（<link>タグ）、すべてを<style> 鬼ごっこ。そのinnerHTMLプロパティを編集すると、サーバーへの往復がなくてもページが自動的に更新されます。

<style type="text/css" id="styles">
    p {
        color: #f0f;
    }
</style>

<textarea id="editor"></textarea>
<button id="preview">Preview</button>

JQueryを使用したJavascript：

jQuery(function($) {
    var $ed = $('#editor')
      , $style = $('#styles')
      , $button = $('#preview')
    ;
    $ed.val($style.html());
    $button.click(function() {
        $style.html($ed.val());
        return false;
    });
});

そしてそれはそれであるはずです！

本当に凝りたい場合は、関数をtextareaのキーダウンにアタッチします。ただし、いくつかの望ましくない副作用が発生する可能性があります（入力するとページが常に変化します）

Edit：テスト済みで動作します（少なくともFirefox 3.5では、他のブラウザでも問題ないはずです）。こちらのデモをご覧ください： http://jsbin.com/owapi

45
nickf

おそらくあなたの状況には当てはまりませんが、外部スタイルシートのリロードに使用するjQuery関数は次のとおりです。

/**
 * Forces a reload of all stylesheets by appending a unique query string
 * to each stylesheet URL.
 */
function reloadStylesheets() {
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}
103
harto

Andrew DaveyのおしゃれなVogueプロジェクトをご覧ください- http://aboutcode.net/vogue/

7
mcintyre321

これにはjQueryを使用する必要はまったくありません。次のJavaScript関数は、すべてのCSSファイルをリロードします。

function reloadCss()
{
    var links = document.getElementsByTagName("link");
    for (var cl in links)
    {
        var link = links[cl];
        if (link.rel === "stylesheet")
            link.href += "";
    }
}
7
Dan Bray

もう1つのjQueryソリューション

ID「css」を持つ単一のスタイルシートの場合、これを試してください：

$('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>');

グローバルscropeを持つ関数でラップし、開発者コンソールからChromeまたはFirefoxのFirebugで使用できます。

var reloadCSS = function() {
  $('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>');
};
6
mattdlockyer

Vanilla JSと1行の短いバージョン：

for (var link of document.querySelectorAll("link[rel=stylesheet]")) link.href = link.href.replace(/\?.*|$/, "?ts=" + new Date().getTime())

または展開：

for (var link of document.querySelectorAll("link[rel=stylesheet]")) {
  link.href = link.href.replace(/\?.*|$/, "?ts=" + new Date().getTime())
}
5
flori

以前のソリューションに基づいて、JavaScriptコードでブックマークを作成しました。

javascript: { var toAppend = "trvhpqi=" + (new Date()).getTime(); var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length;i++) { var link = links[i]; if (link.rel === "stylesheet") { if (link.href.indexOf("?") === -1) { link.href += "?" + toAppend; } else { if (link.href.indexOf("trvhpqi") === -1) { link.href += "&" + toAppend; } else { link.href = link.href.replace(/trvhpqi=\d{13}/, toAppend)} }; } } }; void(0);

Firefoxからの画像：

enter image description here

それは何をするためのものか？

（上記のソリューションとして）クエリ文字列パラメーターを追加してCSSを再読み込みします。

3
LukLed

別の答え： ReCSS というブックマークレットがあります。私はそれを広範囲に使用したことはありませんが、機能しているようです。

そのページには、アドレスバーにドラッグアンドドロップするブックマークレットがあります（ここでは作成できません）。それが壊れた場合のコードは次のとおりです。

javascript:void(function()%7Bvar%20i,a,s;a=document.getElementsByTagName('link');for(i=0;i%3Ca.length;i++)%7Bs=a[i];if(s.rel.toLowerCase().indexOf('stylesheet')%3E=0&&s.href)%20%7Bvar%20h=s.href.replace(/(&%7C%5C?)forceReload=%5Cd%20/,'');s.href=h%20(h.indexOf('?')%3E=0?'&':'?')%20'forceReload='%20(new%20Date().valueOf())%7D%7D%7D)();
0
Christopher Schneider

はい、cssタグをリロードします。また、新しいURLを一意にすることを忘れないでください（通常は、ランダムなクエリパラメーターを追加します）。私はこれを行うためのコードを持っていますが、今は私と一緒ではありません。後で編集します...

編集：遅すぎる... hartoとnickfはそれに私を打ちました;-)

0
slebetman

簡単な方法でrel = "stylesheet"の代わりにrel = "reload"を使用できます。

<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">
0
Gagan

uがphpを使用している場合は単純ですcssの最後に現在時刻を追加するだけです

<link href="css/name.css?<?php echo 
time(); ?>" rel="stylesheet">

だから今、あなたはそれが何であれリロードするたびに、時間は変化し、ブラウザは最後のビットが変化し続けるので、ブラウザはその異なるファイルと考えます....

0
asiimwedismas

私は今これを持っています：

    function swapStyleSheet() {
        var old = $('#pagestyle').attr('href');
        var newCss = $('#changeCss').attr('href');
        var sheet = newCss +Math.random(0,10);
        $('#pagestyle').attr('href',sheet);
        $('#profile').attr('href',old);
        }
    $("#changeCss").on("click", function(event) { 
        swapStyleSheet();
    } );

新しいcss urlを含むhref属性を持つid changeCssを持つページ内の要素を作成します。および開始CSSを持つリンク要素：

<link id="pagestyle" rel="stylesheet" type="text/css" href="css1.css?t=" />

<img src="click.jpg" id="changeCss" href="css2.css?t=">
0
tibi