क्या पृष्ठ को पुनः लोड किए बिना सीएसएस को फिर से लोड करने का एक आसान तरीका है?

Question 1

मैं एक प्रीव्यू फंक्शन वाला लाइव, इन-पेज css एडिटर बनाने की कोशिश कर रहा हूं जो स्टाइलशीट को फिर से लोड करेगा और पेज को रीलोड करने की आवश्यकता के बिना इसे लागू करेगा। इस बारे में जाने का सबसे अच्छा तरीका क्या होगा?

Question 2

"सीएसएस" पृष्ठ पर, सामान्य तरीके से (एक <link>टैग के साथ ) अपने सीएसएस को शामिल करने के बजाय , यह सब एक <style>टैग पर लिखें । उस की innerHTMLसंपत्ति को संपादित करना स्वचालित रूप से पृष्ठ को अपडेट करेगा, यहां तक कि सर्वर के लिए एक गोल-यात्रा के बिना भी।

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

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

जावास्क्रिप्ट का उपयोग करते हुए जावास्क्रिप्ट:

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

और यही होना चाहिए!

यदि आप वास्तव में फैंसी होना चाहते हैं, तो टेक्स्टारिया पर कीडाउन में फ़ंक्शन संलग्न करें, हालांकि आप कुछ अवांछित दुष्प्रभाव प्राप्त कर सकते हैं (जैसा कि आप लिखते हैं पृष्ठ लगातार बदलते रहेंगे)

संपादित करें : परीक्षण और काम करता है (फ़ायरफ़ॉक्स 3.5 में, कम से कम, हालांकि अन्य ब्राउज़रों के साथ ठीक होना चाहिए)। यहां देखें डेमो: http://jsbin.com/ Wapi

Question 3

संभवतः आपकी स्थिति के लिए लागू नहीं है, लेकिन यहां मैं 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);
    });
}

Question 4

इसके लिए jQuery का उपयोग करने की बिल्कुल आवश्यकता नहीं है। निम्नलिखित जावास्क्रिप्ट फ़ंक्शन आपके सभी सीएसएस फ़ाइलों को पुनः लोड करेगा:

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

Question 5

एंड्रयू डेवी की स्नज़ी वोग परियोजना देखें - http://aboutcode.net/vogue/

Question 6

वेनिला JS और एक लाइन में एक छोटा संस्करण:

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

Question 7

एक और jQuery समाधान

आईडी "सीएसएस" के साथ एक एकल स्टाइलशीट के लिए यह प्रयास करें:

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

इसे किसी ऐसे कार्य में लपेटें जिसमें वैश्विक स्तर पर है और आप इसे डेवलपर कंसोल से क्रोम या फायरबग में फ़ायरफ़ॉक्स में उपयोग कर सकते हैं:

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

Question 8

पिछले समाधानों के आधार पर, मैंने जावास्क्रिप्ट कोड के साथ बुकमार्क बनाया है:

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

फ़ायरफ़ॉक्स से छवि:

यहाँ छवि विवरण दर्ज करें

यह क्या करता है?

यह क्वेरी स्ट्रिंग परम को जोड़कर CSS को पुनः लोड करता है (उपरोक्त समाधान के रूप में):

सामग्री / Site.css सामग्री / Site.css बन जाती है? Trvhpqi = 1409572193189 (तिथि जोड़ें)
सामग्री / Site.css? Trvhpqi = 1409572193189 सामग्री / Site.css बन जाती है। trvhpqi = 1409572193200 (तिथि परिवर्तन)
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 ? परिवार = खुला + संस: 400,300,300italic, 400italic, 800italic, 800,700italic, 700,600italic, 600 & सबसेट = लैटिन, लैटिन- ext और trvhpqi = 1409572803189 (तिथि के साथ नया क्वेरी स्ट्रिंग परम जोड़ें)

Question 9

हां, सीएसएस टैग को फिर से लोड करें। और नए यूआरएल को विशिष्ट बनाने के लिए याद रखें (आमतौर पर एक यादृच्छिक क्वेरी पैरामीटर जोड़कर)। मेरे पास ऐसा करने के लिए कोड है लेकिन अभी मेरे पास नहीं है। बाद में संपादित करेंगे ...

संपादित करें: बहुत देर हो चुकी है ... harto और nickf ने मुझे इसे हराया ;-)

Question 10

अब मेरे पास यह है:

    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 विशेषता के साथ। और प्रारंभिक सीएसएस के साथ एक लिंक तत्व:

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

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

Question 11

एक अन्य उत्तर: 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)();

Question 12

अगर आप php का उपयोग कर रहे हैं तो सरल है, जैसे css के अंत में वर्तमान समय को जोड़ें

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

तो अब हर u u जो भी है, उसे समय पर फिर से लोड करें और ब्राउज़र अपनी अलग फाइल के बारे में सोचता है क्योंकि आखिरी बिट बदलती रहती है .... यू किसी भी फाइल के लिए यह कर सकता है u जो भी स्क्रिप्टिंग भाषा u का उपयोग करके ब्राउज़र को हमेशा ताज़ा करने के लिए मजबूर करता है

Question 13

एक सरल तरीके से आप rel = "स्टाइलशीट" के बजाय rel = "preload" का उपयोग कर सकते हैं ।

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

Question 14

चूंकि यह सवाल 2019 में स्टैकओवरफ्लो में दिखाया गया था, इसलिए मैं अधिक आधुनिक जावास्क्रिप्ट का उपयोग करके अपना योगदान जोड़ना चाहूंगा।

विशेष रूप से, सीएसएस स्टाइल्सशीट के लिए जो इनलाइन नहीं हैं - क्योंकि यह पहले से ही मूल प्रश्न से कवर है, किसी तरह।

सबसे पहले, ध्यान दें कि हमारे पास अभी भी कंस्ट्रक्टेबल स्टाइलशीट ऑब्जेक्ट नहीं हैं। हालांकि, हमें उम्मीद है कि जल्द ही उन्हें उतारा जाएगा।

इस बीच, निम्नलिखित 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);
}