Pregunta ¿Hay alguna manera fácil de volver a cargar css sin volver a cargar la página?


Intento crear un editor css en vivo con una función de vista previa que vuelva a cargar la hoja de estilo y la aplique sin necesidad de volver a cargar la página. ¿Cuál sería la mejor manera de hacerlo?


74
2018-01-07 23:31


origen


Respuestas:


En la página "editar", en lugar de incluir su CSS de la manera normal (con un <link> etiqueta), escríbalo todo a <style> etiqueta. Editando el innerHTML la propiedad de eso actualizará automáticamente la página, incluso sin un viaje de ida y vuelta al servidor.

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

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

El Javascript, usando jQuery:

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

¡Y así debería ser!

Si desea ser realmente elegante, adjunte la función a la combinación de teclas en el área de texto, aunque podría obtener algunos efectos secundarios no deseados (la página estaría cambiando constantemente a medida que escribe)

Editar: probado y funciona (en Firefox 3.5, al menos, aunque debería estar bien con otros navegadores). Vea la demostración aquí: http://jsbin.com/owapi


42
2018-01-07 23:44



Posiblemente no sea aplicable para su situación, pero aquí está la función jQuery que uso para volver a cargar hojas de estilo externas:

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

95
2018-01-08 00:01



Vea el elegante proyecto de Vogue de Andrew Davey - http://aboutcode.net/vogue/


7
2017-07-10 00:15



Una solución jQuery más

Para una sola hoja de estilo con id "css" prueba esto:

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

Envuélvalo en una función que tenga scrope global y puede usarlo desde Developer Console en Chrome o Firebug en Firefox:

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

5
2018-04-07 20:05



Basado en soluciones anteriores, he creado un marcador con código 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);

Imagen de Firefox:

enter image description here

¿Qué hace?

Recarga CSS al agregar parámetros de cadena de consulta (como las soluciones anteriores):


2
2017-09-01 11:57



No hay necesidad de usar jQuery para esto. La siguiente función de JavaScript recargará todos sus archivos CSS:

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

1
2018-04-01 20:19



De una manera simple, puedes usar rel = "recargar" en lugar de rel = "stylesheet" .

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

1
2017-09-18 07:46



Una versión más corta en Vanilla JS y en una línea:

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

O expandido:

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

1
2018-05-16 20:24



Sí, recarga la etiqueta css. Y recuerde hacer que la nueva url sea única (generalmente agregando un parámetro de consulta aleatorio). Tengo un código para hacer esto, pero no conmigo en este momento. Editaré más tarde ...

editar: demasiado tarde ... harto y nickf me ganaron ;-)


0
2018-01-07 23:35



ahora tengo esto:

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

crea cualquier elemento en tu página con id changeCss con un atributo href con la nueva url css en él. y un elemento de enlace con el css inicial:

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

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

0
2017-11-04 11:28