javascript - pagina - jquery

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

Question

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?

Answer 1

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:

¿Qué hace?

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

• Content / Site.css se convierte en Content / Site.css? Trvhpqi = 1409572193189 (agrega fecha)
• Content / Site.css? Trvhpqi = 1409572193189 se convierte en Content / Site.css? Trvhpqi = 1409572193200 (cambios de fecha)
• http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,800italic,800,700italic,700,600italic,600&subset=latin,latin-ext convierte en http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,800italic,800,700italic,700,600italic,600&subset=latin,latin-ext&trvhpqi=1409572193189 (agrega un nuevo param de cadena de consulta con la fecha)

Answer 2

De manera simple, puede usar rel = "reload" en lugar de rel = "stylesheet" .

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

Answer 3

Eche un vistazo al elegante proyecto de Vogue de Andrew Davey - http://aboutcode.net/vogue/

Answer 4

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

Answer 5

Otra respuesta: hay un bookmarklet llamado ReCSS . No lo he usado extensamente, pero parece funcionar.

Hay un bookmarklet en esa página para arrastrar y soltar en la barra de direcciones (parece que no puede hacer uno aquí). En caso de que esté roto, aquí está el código:

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

Una versión más corta en Vanilla JS e inlinable.

Expandido:

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

Versión en línea:

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

Answer 10

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=">

Answer 11

En la página "editar", en lugar de incluir su CSS de la manera normal (con una etiqueta <link> ), escríbalo en una etiqueta <style> . La modificación de la propiedad innerHTML 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)

Edición : 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