Как загрузить CSS стили из файла с расширением html?

[sovsem-nub]

Так получилось, что все js и css файлики стали с расширениями html
js можно загрузить с любым расширением. Например так

<script async src="cart.html" type="text/javascript"> </script>

то c CSS так не получится браузер ругается и требует расширение css

<link rel="stylesheet" href="static.html">

есть какой-нибудь javascript костыль, котый бы загружал стили независимо от расширения файла.

файлики лежат в одной папке на компьютере.

[laimas]

Так получилось, что все js и css файлики стали с расширениями html

А почему бы не вернуть нормальные расширения?

[sovsem-nub]

это очень долгая и запутанная история. Есть одна большая страничка http://tiddlywiki.ru/test/heeg.html#static_cut через bloob она нарезает из себя много маленьких. Может нарезать html css js типо генератор сайта, но нарезает она все очень шустро в папку Download (а там уже много чего лежит), а если поставить в настройках "спрашивать", то приходится кликать тысячу раз на каждом файле. Второй недостаток - не перезаписывает файлы а добавляет (1) (2) (3).

Все недостатки скачивания можно допилить маленьким расширеним на хром например такого https://chrome.google.com/webstore/d...kcokgcdkoplbfm оно отлично скачивает все что угодно и даже создает папку js, но все равно пихает в него файлики с расширением html. это какой-то глюк самого хрома и его API, потому что если папку не указывать все работает нормально. А если с папкой, то одни html сыпятся.

пока придумал только css во время генерации превращать в js и грузить как html

var mycss = `

 .tc-modal-header .slideshow-wrap{ 
margin: 0px;
position: inherit;
border: none;
box-shadow: none;
overflow:hidden;
}


`;

<style id="test"></style>
<script async src="static.html" type="text/javascript"> </script>

но там нужно \\ вместо \ делать и вообще как-то туповатенько всё...

[Aetae]

Немного костылей и говнокода:

<srcipt src="cssloader.js" href="static.html"></script>

Где "static.html" - css файл, а "cssloader.js" - примерно такой скрипт:

(function(){
  var xhr = new XMLHttpRequest();
  var href = (document.currentScript || document.scripts[document.scripts.length-1]).getAttribute('href');
  xhr.open('GET', href, false);
  xhr.send(null);
  document.head.insertAdjacentHTML('beforeend', '<style>' +  xhr.responseText + '</style>');
}());

Чуть лучше, если вы это где-то сервите, а не запускаете локально - написать специальные правила проставления нужного mime-type для нужных имён файлов.

По хорошему же - разобраться с вашим генератором.

[sovsem-nub]

Немного костылей и говнокода:


Чуть лучше, если вы это где-то сервите, а не запускаете локально - написать специальные правила проставления нужного mime-type для нужных имён файлов.

По хорошему же - разобраться с вашим генератором.

Спасибо. Как я понимаю на рабочем столе из папки это работать не будет?

from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

моя задумка с var тоже не подошла. страницы при переходе все время "моргают" когда стили подгружаются....

[Aetae]

Да, почему-то был уверен что заработает, даже проверять не стал. Видать последний раз в лохматом году, когда я подобным занимался, браузеры ещё не задалбывали со своей "безопасностью" где не просят. Собсно и css грузить они отказались не так давно...

Если у вас есть доступ к генерации, то идея с подключением как скрипт имеет право на жизнь в примерно таком виде:

(function(){
  var css = (function(){
    /* 
    * {
      background: #000;
      color: #fff
    }
    */
  }).toString();
  css = css.slice(css.indexOf('/*')+2, css.lastIndexOf('*/'));

  document.write('<style>', css, '</style>')
}());

Тут следует обратить внимание на 3 вещи:
1. Классический костыль для многострочного текста в js через комментарий и получение текста функции. При таком походе не надо париться об экранировании, единственное что важно - чтоб в css не было своих комментариев.
2. Использование document.write, который плюёт данные прямо в поток, что вызывает их обработку на лету - чтоб не было "моргания".
3. <script> должен быть ни в коем случае не async - опять же, чтоб не было "моргания".

P.S. Идея починить генератор - всё ещё актуальна. Если вы лично не имеете доступа - напишите автору.

[sovsem-nub]

P.S. Идея починить генератор - всё ещё актуальна. Если вы лично не имеете доступа - напишите автору.

да, генератор был не совсем правильный. Вот blob пример, который нормально заработал https://codepen.io/vidhill/pen/bNPEmX и скачивает файлы и кладет их в нужную папку не меняя расширения и перезаписывает молча поверху, если дубль.

вся проблема была в

type: "octet/stream"

я везде как осотонелый пихал

type: "text/css"

а оно вон оно чо