Estoy tratando de hacer un live en la página editor de css con una función de vista previa que volver a cargar la hoja de estilos y aplicarlo sin necesidad de recargar la página. ¿Cuál sería la mejor manera de ir sobre esto?

  • 2014 y esta cuestión se encuentra en la página de inicio…

11 Comentarios

  1. 45

    Sobre la opción «editar» de la página, en lugar de incluir CSS en la forma normal (con un <link> etiqueta), escribir todo un <style> etiqueta. La edición de la innerHTML propiedad de que automáticamente la actualización de la página, incluso sin un viaje redondo para el 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 eso debe ser!

    Si quieres ser realmente de lujo, adjuntar la función a la keydown en el textarea, a pesar de que usted podría conseguir algunos efectos secundarios no deseados (la página podría estar cambiando constantemente a medida que escribe)

    Editar: probado y funciona (en Firefox 3.5, por lo menos, aunque debe estar bien con otros navegadores). Ver demo aquí: http://jsbin.com/owapi

    • Es decir barfs en innerHTML para <style> elementos (y <script>).
    • lo que si es href ed?
    • Por cierto, se puede asociar una función a la keydown en el textarea pero acelerador con lo-dash (por ejemplo).
  2. 102

    Posiblemente no se aplica a su situación, pero aquí está la función jQuery que yo uso para recarga externa de las hojas de estilo:

    /**
     * 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[]').each(function () {
            this.href = this.href.replace(/\?.*|$/, queryString);
        });
    }
    • Usted puede hacer un marcador de libros con ted.mielczarek.org/code/mozilla/bookmarklet.html
    • Esto no jquery one-liner me funciona en chrome: var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length;i++) { var link = links[i]; if (link.rel === "stylesheet") {link.href += "?"; }}
    • a mi me funciona en Safari, también.
    • No estoy seguro si es porque yo soy sólo abrir la página en chrome desde el disco, pero esto no es trabajo para mí.
  3. 7

    Retirar Andrew Davey del elegante Vogue proyecto – http://aboutcode.net/vogue/

    • Esto es exactamente lo que he estado buscando. Se vuelve a cargar el CSS tan pronto como la hoja de estilos es cambiado, sin la necesidad de actualizar manualmente la página. Un millón de gracias por compartir 🙂
    • Puede Vogue ejecutarse localmente en wamp?
    • Traté de hacer la recarga de secuencia de comandos, como Vogue. Pero en Chrome es el problema, porque olest archivos de hoja de estilo estancia en el navegador y de trabajo. Por ejemplo, en uno de los elementos puedo cambiar de fondo de blanco a rojo, y me musted deshabilitar la última de color rojo.
  4. 6

    Uno más de jQuery solución

    Para una sola hoja de estilos con id «css» intenta esto:

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

    Se envuelve en una función que tiene global scrope y se puede usar desde la Consola para Desarrolladores de Chrome o Firebug en Firefox:

    var reloadCSS = function() {
      $('#css').replaceWith('<link id="css"  href="css/main.css?t=' + Date.now() + '"></link>');
    };
    • hola, yo tengo este, que de alguna forma sólo funciona queridos 🙁 aunque tengo el tiempo añadido para que sea única (esto es en firefox): <code> función swapStyleSheet(hoja) { var hoja = hoja+’?t=’ + Fecha.ahora(); $(‘#pagestyle’).replaceWith(‘<link id=»css» href=»‘+hoja+'»></link>’); } $(«#stylesheet1»).en(«click», function(evento) { swapStyleSheet(«<c:valor url=’sitio.css’/>»); } ); $(«#stylesheet2»).en(«click», function(evento) { swapStyleSheet(«<c:valor url=’sitio2.css’/>»); } ); </código de>
  5. 5

    No hay absolutamente ninguna necesidad de usar jQuery para esto. La siguiente función JavaScript que se vuelva a cargar todos los archivos CSS:

    function reloadCss()
    {
        var links = document.getElementsByTagName("link");
        for (var cl in links)
        {
            var link = links[cl];
            if (link.rel === "stylesheet")
                link.href += "";
        }
    }
    • Estoy usando esto en la consola así que no necesito añadir nada más en mi código
  6. 5

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

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

    O ampliada:

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

    Basado en soluciones anteriores, he creado 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:

    Hay una manera fácil de cargar css sin necesidad de recargar la página?

    ¿Qué hacer?

    Se vuelve a cargar CSS mediante la adición de cadena de consulta de parámetros (como las soluciones de la anterior):

    • Contenido Del Sitio.css se convierte en el Contenido de/del Sitio.css?trvhpqi=1409572193189 (añade la fecha)
    • Contenido Del Sitio.css?trvhpqi=1409572193189 se convierte en el Contenido de/del Sitio.css?trvhpqi=1409572193200 (cambio de fecha)
    • http://fonts.googleapis.com/css?family=Open+Sans:400,300,300 italic,400italic,800italic,800,700 italic,700,600 italic,600&subset=latin,latin-ext se convierte en http://fonts.googleapis.com/css?family=Open+Sans:400,300,300 italic,400italic,800italic,800,700 italic,700,600 italic,600&subset=latin,latin-ext&trvhpqi=1409572193189 (añade una nueva cadena de consulta param con la fecha)
  8. 0

    Sí, volver a cargar el css de la etiqueta. Y recuerde hacer la nueva dirección url única (generalmente añadiendo un azar parámetro de consulta). Tengo el código para hacer esto, pero no conmigo ahora mismo. Va a editar más tarde…

    edición: demasiado tarde… harto y nickf me pegaba a él 😉

  9. 0

    ahora tengo este:

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

    hacer de cualquier elemento de la página con id changeCss con un atributo href con el nuevo css url en ella. y un elemento de enlace con la partida de css:

    <link id="pagestyle" rel="stylesheet" type="text/css" href="css1.css?t=" />
    
    <img src="click.jpg" id="changeCss" href="css2.css?t=">
  10. 0

    Otra respuesta:
    Hay un script llamado ReCSS. No he utilizado extensamente, pero parece que funciona.

    Hay un bookmarklet en la página de arrastrar y soltar en la barra de direcciones (parece que no Puede hacer uno aquí). En caso de que se rompió, 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)();
  11. 0

    De forma sencilla, se puede utilizar en lugar de .

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

Dejar respuesta

Please enter your comment!
Please enter your name here