时间戳

首页 > 解决方案 > 外部 CSS 在 chrome 中下载但未反映

css - 外部 CSS 在 chrome 中下载但未反映

问题描述

我有一个外部 CSS 样式，它在 chrome 中下载但没有反映。当我这样做时，它会手动更改内联样式表。它在 Firefox 浏览器中运行良好。

以以下格式加载样式表：

if (domainURL != '') {
    link = document.createElement('LINK');
    link.rel = 'stylesheet';
    link.href = domainURL;
    link.type = 'text/css';
    document.head.appendChild(link);
}

我也尝试了以下解决方案，但都没有奏效。

  1. 刷新
  2. 清除缓存
  3. 在样式链接中添加版本（例如：https://tel.org.css?v=1.111）

请有人帮我解决这个 chrome 浏览器问题。

标签： cssangulargoogle-chrome

解决方案

到目前为止，我的猜测是 CSS 文件没有被应用，因为它有一个错误的HTTP 标头content-type，其值应该是带有编码参数 ( ) 的mime 类型text/css; charset: UTF-8，但它是一个未知值 ( css)。

Firefox 似乎覆盖了错误的内容类型标头并嗅探（猜测）信息（因为x-content-type-options: nosniff不允许这样做）。而 Chrome 可能反而尊重标题“如果它在那里，它一定是有原因的”，因此不知道如何处理未知类型的文件。

要测试此诊断程序，您应该尝试：

  • 加载另一个 CSS 文件（如果可能，托管在其他地方，因为它可能是服务器设置了错误的标头）。它不一定要漂亮，只是为了显示它是否被应用。
  • 如果可以，请更改标题。修复 content-type 或删除它（让浏览器嗅探 mime-type，这对于安全性来说不是理想的，但会起作用）。
  • 在 JS 中创建样式表： 
    fetch('your-css-file.css')
    .then(response => response.text())
    .then(styleString => {
        const style = document.createElement('style')
        style.textContent = styleString
        document.head.append(style)
    })

我测试了自己的第三种解决方案（在 JS 中获取并使用文本响应创建样式表）并且它有效。但是，由于以下规则，它会尝试下载图像：

.logo { 
  background-image:  url(../logo/images6.1624696593222.jpg);

而且，和以前一样，我得到了一个错误的内容类型标题：

Request URL: https://greatone11.aroscop.org/logo/images6.1624696593222.jpg
content-type: text/html; charset=UTF-8
server: nginx/1.18.0
x-powered-by: Express

似乎您将expressjs作为您的服务器，将nginx作为您的反向代理。其中之一就是弄乱你的标题。我的赌注是 Express，因为它可能是为 Angular 设置的，而您正在尝试在这里做一些不太有角度的事情！

推荐阅读