javascript - Jquery - 使用谷歌字体链接重新加载 css

Question

我需要在用户使用颜色选择器选择他的主题颜色后重新加载 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">

在控制台中我收到这个错误:

Failed to load resource: the server responded with a status of 400 (Bad Request) 
http://fonts.googleapis.com/css?reload=1397489335832

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

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

我如何才能将样式表 google 与其他样式表“分开”？

Answer 1

您的字体链接是 http://fonts.googleapis.com/css?family=Varela+Round ，因此您的重新加载链接应该是 http://fonts.googleapis.com/css?family=Varela+Round&reload=1397489335832

您需要更新函数以考虑 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;
    }
  });
}