Как сослаться на таблицу стилей сущности в другой сущности? - PullRequest
Новая
       48

Как сослаться на таблицу стилей сущности в другой сущности?

1 голос
/ 26 мая 2020

Я создал суть, в которой есть страница html и файл css. Как мне сослаться на файл css на странице html?

Я пробовал несколько способов, но ни один из них не работает. Страница html находится по адресу: https://gist.github.com/yuipcheng/943286be35fd690f499d59534281a6c5

Страница просмотра: https://gistpreview.github.io/?943286be35fd690f499d59534281a6c5

1 Ответ

1 голос
/ 26 мая 2020

gistpreview.github.io загружает html с Javascript с помощью Github Gist API . Из исходного кода он просто записывает содержимое html. Таким образом, он не имеет дело с относительными ссылками, которые могут ссылаться на другие файлы css.

Вам потребуется:

  • форк проекта gistpreview
  • после рендеринга html (document.write), переберите теги link и проверьте, присутствуют ли они в поле files результата API
  • загрузите css содержимое динамически при совпадении

Я тестировал этот метод выше, используя эту вилку .

Пример для вас: https://bertrandmartel.github.io/gistpreview.github.io/?943286be35fd690f499d59534281a6c5

Код перед: 

var content = info.files[fileName].content;
document.write(content);

Код после: 

var content = info.files[fileName].content;
document.write(content);

//load links
var links = document.querySelectorAll("link");
for (let [key, value] of Object.entries(info.files)) {
  for (var i = 0; i < links.length; i++) {
    var href = links[i].getAttribute("href").replace(/^\/|\/$/g, '');
    if (value.filename === href && value.type === "text/css") {
      console.log("load file " + value.filename);
      var style = document.createElement('style');
      style.type = 'text/css';
      style.innerHTML = value.content;
      document.getElementsByTagName('head')[0].appendChild(style);
    }
  }
}
...