首页 文章

有没有一种简单的方法来重新加载CSS而无需重新加载页面？

提问于
浏览 次
76

我正在尝试使用预览功能制作一个实时的页内css编辑器，该功能可以重新加载样式表并应用它而无需重新加载页面 . 最好的方法是什么？

javascript css stylesheet reload

11 回答

  • 6

    在"edit"页面上，不是以正常方式包含CSS（使用 <link> 标记），而是将其全部写入 <style> 标记 . 编辑它的 innerHTML 属性将自动更新页面，即使没有到服务器的往返 .

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

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

    Javascript，使用jQuery：

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

    这应该是它！

    如果你想要真正的花哨，将功能附加到textarea上的keydown，虽然你可能会得到一些不必要的副作用（页面会在你键入时不断变化）

    Edit ：测试和工作（至少在Firefox 3.5中，但对其他浏览器应该没问题） . 在这里看演示：http://jsbin.com/owapi

    回复于
  • 0

    可能不适用于您的情况，但这是我用于重新加载外部样式表的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);
    });
}
    回复于
  • 2

    看看Andrew Davey时髦的Vogue项目 - http://aboutcode.net/vogue/

    回复于
  • 7

    还有一个jQuery解决方案

    对于ID为“css”的单个样式表，请尝试以下操作：

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

    将其包含在具有全局scrope的函数中，您可以在Chrome中的Developer Console或Firefox中的Firebug中使用它：

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

    绝对没有必要为此使用jQuery . 以下JavaScript函数将重新加载所有CSS文件：

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

    基于以前的解决方案，我使用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);

    来自Firefox的图片：

    enter image description here

    它有什么作用？

    它通过添加查询字符串参数重新加载CSS（如上面的解决方案）：

    回复于
  • 0

    Vanilla JS中的一个较短版本，在一行中：

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

    或者扩大：

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

    以简单的方式，您可以使用 rel="reload" 而不是 rel="stylesheet" .

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

    是的，重新加载css标签 . 并记住使新网址唯一（通常通过附加随机查询参数） . 我有代码可以做到这一点，但现在不能和我在一起 . 稍后会编辑......

    编辑：太晚了...哈托和尼克夫打败了我;-)

    回复于
  • 99

    我现在有这个：

    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属性在页面中使用id changeCss创建任何元素 . 和一个起始css的链接元素：

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

<img src="click.jpg" id="changeCss" href="css2.css?t=">
    回复于
  • 44

    另一个答案：有一个名为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)();
    回复于

相关问题