Javascript Jquery-使用google字体链接重新加载css

我需要在用户使用colorpicker选择主题颜色后重新加载css文件

对于另一个问题，我发现了一个很好的解决方案：

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

我的问题是，我有一个谷歌字体链接到页面

<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel="stylesheet">

存储在我的服务器中的其他css都重新加载良好

e.g. <link href="css/style.css" rel="stylesheet" type="text/css" />

例如。

如何将google样式表与其他样式表“分离”？

您的字体链接是，因此您的重新加载链接应该是

您需要更新函数以考虑URL中已有参数的情况

function reloadStylesheets() {
  var queryString = 'reload=' + new Date().getTime();
  $('link[rel="stylesheet"]').each(function () {
    if(this.href.indexOf('?') !== -1){
       this.href = this.href + '&' + queryString;
    }
    else{
       this.href = this.href + '?' + queryString;
    }
  });
}

---

您可以很容易地测试google样式表链接：

    var googleUrl = new RegExp('fonts.googleapis.com/css\\?family=Varela\\+Round');
    $('link[rel="stylesheet"]').each(function () {
        if (googleUrl.test(this.href)) {
          continue;
        }

但是，根本问题是，

reloadStylesheets

函数在替换queryString时过于激进。不要盲目地用新的

reload

参数替换问号后的所有内容，您应该更加精确。这样，如果您加载了一个查询字符串很重要的本地样式表（例如，服务器生成的样式表中只有一部分用于移动的样式），您就不会用脚本中断页面

这也将消除排除Google样式表的需要，但由于不太可能改变，您应该继续排除它，并让它从浏览器缓存加载

    var googleUrl = new RegExp('fonts.googleapis.com/css\\?family=Varela\\+Round');
    $('link[rel="stylesheet"]').each(function () {
        if (googleUrl.test(this.href)) {
          continue;
        }