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


90

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


1
2014年、この質問はホームページにあります...
Kroltan

1
2019年、ほとんど2020年、まだホームページに飛び出るこの質問...
ZER0

回答:


51

「編集」ページで、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;
    });
});

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

本当に凝ったものにしたい場合は、テキスト領域のキーダウンに関数をアタッチしますが、望ましくない副作用が発生する可能性があります(入力するとページが常に変化します)

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


3
IEinnerHTML<style>要素(および<script>)に対してバーフをオンにします。
JPot 2010年

3
それがhrefされた場合はどうなりますか?
allenhwkim 2013

ところで、テキストエリアのキーダウンに関数をアタッチすることはできますが、たとえば、lo-dashでスロットルします。
カミロマーティン

109

おそらくあなたの状況には当てはまりませんが、外部スタイルシートをリロードするために私が使用する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);
    });
}


36
この非jqueryワンライナーはクロムで私のために働きます:var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length;i++) { var link = links[i]; if (link.rel === "stylesheet") {link.href += "?"; }}
クロード

ディスクからChromeでページを開いているだけなので、それかどうかはわかりませんが、これは機能しません。
Joao Carlos

14

これに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 += "";
    }
}

1
私はこれをコンソールで使用しているので、コードに他に何も追加する必要はありません
loco.loop 2017年

@Bram中括弧はオプションです。コードは正常に機能します。
ダン・ブレイ

1
jQueryに依存しないので素晴らしい答えです!:)
Gustavo Straube

9

AndrewDaveyのおしゃれなVogueプロジェクトをチェックしてください-http ://aboutcode.net/vogue/


これはまさに私が探していたものです。スタイルシートが変更されるとすぐにCSSをリロードし、ページを手動で更新する必要はありません。共有してくれてありがとう:)
Devner 2013

VogueはWampでローカルに実行できますか?
chrisdillon 2014

Vogueのようなリロードスクリプトを試してみました。しかし、Chromeでは問題があります。これは、olestスタイルシートファイルがブラウザに残り、機能するためです。たとえば、ある要素で背景を赤から白に変更し、最後の色である赤を無効にする必要がありました。
ピーター

7

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

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

または拡張:

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

6

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

IDが「css」の単一のスタイルシートの場合は、次のことを試してください。

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

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

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

1
こんにちは、私はこれを持っています、それはいくつかの方法でのみ機能します:(私はそれをユニークにするために時間を追加していますが(これはfirefoxにあります):<code> function swapStyleSheet(sheet){var sheet = sheet + '?t =' + Date.now(); $( '#pagestyle')。replaceWith( '<link id = "css" rel = "stylesheet" href = "' + sheet + '"> </ link>');} $( " #stylesheet1 ")。on(" click "、function(event){swapStyleSheet(" <c:url value = 'site.css' /> ");}); $("#stylesheet2 ")。on(" click "、function(event){swapStyleSheet(" <c:url value = 'site2.css' /> ");}); </ code>
tibi

3

以前のソリューションに基づいて、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からの画像:

ここに画像の説明を入力してください

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

クエリ文字列パラメータを追加することでCSSをリロードします(上記の解決策として):


0

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

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


0

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

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

新しいcssURLを含むhref属性を使用してidchangeCssを使用してページ内の要素を作成します。および開始cssを持つリンク要素:

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

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

0

別の答え: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

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

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

だから今、あなたがそれが何であれリロードするたびに、時間は変わり、最後のビットが変化し続けるのでブラウザは別のファイルを考えます....あなたはどんなファイルに対してもこれを行うことができますあなたはあなたが望むどんなスクリプト言語を使っても常にブラウザをリフレッシュするように強制します


0

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

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

あなたは使うと言ったrel="reload"が、例は言うrel="preload"
haykam

私を訂正してくれてありがとう@haykam、私はそれを更新しました。
GAGAN

0

この質問は2019年のstackoverflowで表示されたので、より新しいJavaScriptを使用して私の貢献を追加したいと思います。

具体的には、インラインではないCSSスタイルシートの場合-それは元の質問からすでにカバーされているため、どういうわけか。

まず第一に、構築可能なスタイルシートオブジェクトがまだないことに注意してください。ただし、すぐに着陸することを望んでいます。

それまでの間、次のHTMLコンテンツを想定します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link id="theme" rel="stylesheet" type="text/css" href="./index.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <p>Hello World</p>
    <button onclick="reload('theme')">Reload</button>
  </body>
</html>

私たちは、で持つことができますindex.js

// Utility function to generate a promise that is 
// resolved when the `target` resource is loaded,
// and rejected if it fails to load.
//
const load = target =>
  new Promise((rs, rj) => {
    target.addEventListener("load", rs, { once: true });
    target.addEventListener(
      "error",
      rj.bind(null, `Can't load ${target.href}`),
      { once: true }
    );
  });


// Here the reload function called by the button.
// It takes an `id` of the stylesheet that needs to be reloaded
async function reload(id) {
  const link = document.getElementById(id);

  if (!link || !link.href) {
    throw new Error(`Can't reload '${id}', element or href attribute missing.`);
  }

  // Here the relevant part.
  // We're fetching the stylesheet from the server, specifying `reload`
  // as cache setting, since that is our intention.
  // With `reload`, the browser fetches the resource *without* first looking
  // in the cache, but then will update the cache with the downloaded resource.
  // So any other pages that request the same file and hit the cache first,
  // will use the updated version instead of the old ones.
  let response = await fetch(link.href, { cache: "reload" });

  // Once we fetched the stylesheet and replaced in the cache,
  // We want also to replace it in the document, so we're
  // creating a URL from the response's blob:
  let url = await URL.createObjectURL(await response.blob());

  // Then, we create another `<link>` element to display the updated style,
  // linked to the original one; but only if we didn't create previously:
  let updated = document.querySelector(`[data-link-id=${id}]`);

  if (!updated) {
    updated = document.createElement("link");
    updated.rel = "stylesheet";
    updated.type = "text/css";
    updated.dataset.linkId = id;
    link.parentElement.insertBefore(updated, link);

    // At this point we disable the original stylesheet,
    // so it won't be applied to the document anymore.
    link.disabled = true;
  }

  // We set the new <link> href...
  updated.href = url;

  // ...Waiting that is loaded...
  await load(updated);

  // ...and finally tell to the browser that we don't need
  // the blob's URL anymore, so it can be released.
  URL.revokeObjectURL(url);
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.