Ответ 1

Здесь используется "старая школа", которая, надеюсь, работает во всех браузерах. Теоретически, вы бы использовали setAttribute, к сожалению, IE6 не поддерживает его последовательно.

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

В этом примере проверяется, был ли добавлен CSS, поэтому он добавляет его только один раз.

Поместите этот код в javascript файл, попросите конечного пользователя просто включить javascript и убедитесь, что путь к CSS является абсолютным, поэтому он загружается с ваших серверов.

VanillaJS

Вот пример, который использует простой JavaScript для вставки ссылки CSS в элемент head на основе части имени файла URL:

<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();

var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";

document.getElementsByTagName( "head" )[0].appendChild( link );
</script>

Вставьте код непосредственно перед закрывающим тегом head, и CSS будет загружен до отображения страницы. Использование внешнего файла JavaScript (.js) приведет к появлению Flash неровного содержимого (FOUC).

Ответ 2

Я думаю, что что-то вроде этого script будет делать:

<script type="text/javascript" src="/js/styles.js"></script>

Этот JS файл содержит следующую инструкцию:

if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">');

Адрес javascript и css должен быть абсолютным, если они должны ссылаться на ваш сайт.

Многие методы импорта CSS обсуждаются в этой статье "Скажите нет CSS хакам с технологиями ветвления" .

Но Использование JavaScript для динамического добавления таблиц стилей CSS в Portlet в статье упоминается также возможность CreateStyleSheet (фирменный метод для IE):

<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
  document.createStyleSheet('http://server/stylesheet.css');
}
else {
  var styles = "@import url(' http://server/stylesheet.css ');";
  var newSS=document.createElement('link');
  newSS.rel='stylesheet';
  newSS.href='data:text/css,'+escape(styles);
  document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>

Ответ 3

Если вы используете jquery:

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');

Ответ 4

Вызвать следующую функцию для динамической загрузки файла CSS или JavaScript.

function loadjscssfile(filename, filetype) {
  if (filetype == "js") { //if filename is a external JavaScript file
    // alert('called');
    var fileref = document.createElement('script')
    fileref.setAttribute("type", "text/javascript")
    fileref.setAttribute("src", filename)
    alert('called');
  } else if (filetype == "css") { //if filename is an external CSS file
    var fileref = document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename)
  }
  if (typeof fileref != "undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

Передайте полный путь к файлу с именем в качестве аргумента filename.

Ответ 5

Я знаю, что это довольно старый поток, но вот мои 5 центов.

Существует другой способ сделать это в зависимости от ваших потребностей.

У меня есть случай, когда я хочу, чтобы файл css был активным только некоторое время. Как css переключения. Активируйте css, а затем после другого события деактивируйте его.

Вместо того, чтобы загружать css динамически, а затем удалять его, вы можете добавить класс /id перед всеми элементами нового css, а затем просто переключить этот класс /id базы node вашего css (например, тело тег).

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

Ответ 6

Если вы хотите узнать (или подождать), пока не загрузится сам стиль, выполните следующие действия:

// this will work in IE 10, 11 and Safari/Chrome/Firefox/Edge
// add ES6 poly-fill for the Promise, if needed (or rewrite to use a callback)

let fetchStyle = function(url) {
  return new Promise((resolve, reject) => {
    let link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.onload = function() { resolve(); console.log('style has loaded'); };
    link.href = url;

    let headScript = document.querySelector('script');
    headScript.parentNode.insertBefore(link, headScript);
  });
};

Ответ 7

Существует общий плагин jquery, который загружает синхронизацию файлов css и JS и asych по запросу. Он также отслеживает то, что уже загружено:) см. http://code.google.com/p/rloader/

Ответ 8

Здесь способ с использованием метода создания элемента jQuery (мои предпочтения) и с обратным вызовом onLoad:

var css = $("<link>", {
  "rel" : "stylesheet",
  "type" :  "text/css",
  "href" : "style.css"
})[0];

css.onload = function(){
  console.log("CSS IN IFRAME LOADED");
};

document
  .getElementsByTagName("head")[0]
  .appendChild(css);

Ответ 9

библиотека YUI может быть тем, что вы ищете. Он также поддерживает загрузку кросс-домена.

Если вы используете jquery, этот плагин делает то же самое.

Ответ 10

Вы можете использовать эту библиотеку YUI или использовать эту статью для реализации

Ответ 11

Ниже полный код, используемый для загрузки JS и/или CSS

function loadScript(directory, files){
  var head = document.getElementsByTagName("head")[0]
  var done = false
  var extension = '.js'
  for (var file of files){ 
    var path = directory + file + extension 
    var script = document.createElement("script")
    script.src = path        
    script.type = "text/javascript"
    script.onload = script.onreadystatechange = function() {
        if ( !done && (!this.readyState ||
            this.readyState == "loaded" || this.readyState == "complete") ) {
            done = true
            script.onload = script.onreadystatechange = null   // cleans up a little memory:
            head.removeChild(script)  // to avoid douple loading
        }
  };
  head.appendChild(script) 
  done = false
 }
}

function loadStyle(directory, files){
  var head = document.getElementsByTagName("head")[0]
  var extension = '.css'
  for (var file of files){ 
   var path = directory + file + extension 
   var link = document.createElement("link")
   link.href = path        
   link.type = "text/css"
   link.rel = "stylesheet" 
   head.appendChild(link) 
 }
}

(() => loadScript('libraries/', ['listen','functions', 'speak', 'commands', 'wsBrowser', 'main'])) ();
(() => loadScript('scripts/', ['index'])) ();

(() => loadStyle('styles/', ['index'])) ();

Ответ 12

var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")

Я использую тимелеаф, и это отлично работает. Благодаря

Ответ 13

Используйте этот код:

var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "external.css");
document.getElementsByTagName("head")[0].appendChild(element);