Ссылка на внешний файл CSS без использования расширения `.css` - PullRequest
Новая
       69

Ссылка на внешний файл CSS без использования расширения `.css`

1 голос
/ 29 января 2020

Можно ли ссылаться на простой текстовый файл как файл CSS в пределах HTML? У меня нет контроля над именем или расширением внешнего CSS файла. В качестве примера возьмем следующее:

У меня есть файл с именем index.html со следующим кодом между тегами <head>: 

<head>
    <title>Website</title>
    <link rel="stylesheet" href="https://example.com/styles">
</head>

Внешний файл в example.com/styles выглядит следующим образом this: 

body {
    color: red;
    font-family: sans-serif;
    background: blue;
}

Если я открываю index.html, в терминале моего браузера появляется следующая ошибка:

Таблица стилей https://example.com/styles не была загружена потому что его MIME-тип «text / plain» не является «text / css».

Даже если я указываю тип MIME с помощью type="text/plain" при обращении к файлу styles, я все равно получаю та же ошибка.

Опять же, у меня нет никакого контроля над тем, как называется файл styles, или каково его расширение. Все, что я знаю, это URL. Очевидно, что эту проблему можно решить, если веб-сервер загрузит файл styles, а затем предоставит локальной копии расширение .css, но для этого проекта у меня нет доступа к внутреннему серверу.

1 Ответ

1 голос
/ 29 января 2020

Следующее достигает того, что вы намерены, но, возможно, это плохая практика. Он запрашивает ресурс и затем вставляет его в тег style, минуя проверку MIME браузером. Я бы предложил получить CSS и подать его с правильным Content-Type.

index. html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS From Text File</title>
  <style id="style"></style>
</head>

<body>
  <div id="styled"></div>
</body>

<script>
  const style = document.getElementById('style');
  const req = new XMLHttpRequest();
  req.onloadend = () => {
    style.innerHTML = req.responseText;
  };
  req.open("GET", "style.txt");
  req.send();
</script>

</html>

style.txt 


#styled {
  height: 100px;
  width: 100px;
  background: red;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...