Sayfayı yeniden yüklemeden css'i yeniden yüklemenin kolay bir yolu var mı?

Stil sayfasını yeniden yükleyecek ve sayfayı yeniden yüklemeye gerek kalmadan uygulayacak bir önizleme işlevi olan canlı, sayfa içi bir css editörü yapmaya çalışıyorum. Bunu yapmanın en iyi yolu ne olabilir?

"Düzenle" sayfasında, CSS'nizi normal şekilde (bir <link>etiketle) eklemek yerine, hepsini bir <style>etikete yazın. Bunun innerHTMLözelliğini düzenlemek, sunucuya bir gidiş dönüş olmasa bile sayfayı otomatik olarak güncelleyecektir.

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

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

JQuery kullanan Javascript:

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

Ve bu olmalı!

Gerçekten süslü olmak istiyorsanız, işlevi metin alanındaki tuşlara ekleyin, ancak bazı istenmeyen yan etkilerle karşılaşabilirsiniz (sayfa siz yazdıkça sürekli değişir)

Düzenleme : test edildi ve çalışıyor (en azından Firefox 3.5'te, diğer tarayıcılarla uyumlu olsa da). Demoyu buradan izleyin : http://jsbin.com/owapi

Muhtemelen sizin durumunuz için geçerli değildir, ancak işte harici stil sayfalarını yeniden yüklemek için kullandığım jQuery işlevi:

/**
 * 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);
    });
}

Bunun için kesinlikle jQuery kullanmaya gerek yoktur. Aşağıdaki JavaScript işlevi tüm CSS dosyalarınızı yeniden yükleyecektir:

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

Andrew Davey'in şık Vogue projesine göz atın - http://aboutcode.net/vogue/

Vanilla JS'de ve tek satırda daha kısa bir versiyon:

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

Veya genişletilmiş:

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

Bir jQuery çözümü daha

"Css" kimliğine sahip tek bir stil sayfası için şunu deneyin:

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

Bunu global scrope içeren bir işleve sarın ve Chrome'da Developer Console'dan veya Firefox'ta Firebug'dan kullanabilirsiniz:

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

Önceki çözümlere dayanarak, JavaScript koduyla yer imi oluşturdum:

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'tan görüntü:

Bu ne işe yarıyor?

Sorgu dizesi parametrelerini ekleyerek CSS'yi yeniden yükler (yukarıdaki çözümler gibi):

• Content / Site.css, Content / Site.css? Trvhpqi = 1409572193189 olur (tarih ekler)
• Content / Site.css? Trvhpqi = 1409572193189, Content / Site.css? Trvhpqi = 1409572193200 olur (tarih değişiklikleri)
• http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,800italic,800,700italic,700,600italic,600&subset=latin,latin-ext , http://fonts.googleapis.com/css olur ? family = Açık + Sans: 400,300,300italik, 400italik, 800italik, 800,700italik, 700,600italik, 600 & alt küme = latin, latin-ext & trvhpqi = 1409572193189 (tarih içeren yeni sorgu dizesi parametresini ekler)

php kullanıyorsanız basit Sadece css'nin sonuna şu anki saati ekleyin

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

Yani şimdi ne olursa olsun her yeniden yüklediğinizde, zaman değişir ve tarayıcı, son bit değişmeye devam ettiğinden beri farklı bir dosya olduğunu düşünür .... Bunu herhangi bir dosya için yapabilir u, tarayıcıyı istediğiniz komut dosyası dilini kullanarak her zaman yenilemeye zorlar

Evet, css etiketini yeniden yükleyin. Ve yeni url'yi benzersiz yapmayı unutmayın (genellikle rastgele bir sorgu parametresi ekleyerek). Bunu yapacak bir kodum var ama şu anda benimle değil Daha sonra düzenlenecek ...

düzenleme: çok geç ... harto ve nickf beni yendi ;-)

şimdi buna sahibim:

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

İçinde yeni css url'si olan bir href özniteliğine sahip changeCss kimliğine sahip sayfanızdaki herhangi bir öğeyi yapın. ve başlangıç ​​css ile bir bağlantı öğesi:

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

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

Başka bir cevap: ReCSS adında bir yer imi var . Yaygın olarak kullanmadım ama işe yarıyor gibi görünüyor.

Bu sayfada adres çubuğunuza sürükleyip bırakabileceğiniz bir yer imi var (Burada bir tane yapamıyorum). Bunun kırılması durumunda kod şu şekildedir:

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

Basit bir şekilde rel = "stylesheet" yerine rel = "preload" kullanabilirsiniz .

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

Bu soru 2019'da stackoverflow'da gösterildiğinden, katkımı daha modern bir JavaScript kullanarak eklemek istiyorum.

Spesifik olarak, satır içi olmayan CSS Stil Sayfası için - çünkü bu zaten bir şekilde orijinal soruda ele alınmıştır.

Her şeyden önce, hala Yapılandırılabilir Stil Sayfası Nesnelerimiz olmadığına dikkat edin. Ancak, yakında inmelerini umuyoruz.

Bu arada, aşağıdaki HTML içeriğini varsayarak:

<!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>

Şunları yapabilirdik 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);
}