Как загрузить файлы CSS с помощью Javascript? - PullRequest
Новая
       108

Как загрузить файлы CSS с помощью Javascript?

281 голосов
/ 22 февраля 2009

Можно ли импортировать таблицы стилей CSS в HTML-страницу, используя Javascript? Если да, то как это можно сделать?

PS javascript будет размещен на моем сайте, но я хочу, чтобы пользователи могли добавлять тег <head> своего веб-сайта, и он должен иметь возможность импортировать файл css, размещенный на моем сервере, в текущий веб-сайт. стр. (и файл css, и файл javascript будут размещены на моем сервере).

Ответы [ 15 ]

379 голосов
/ 23 февраля 2009

Вот способ «старой школы», который, надеюсь, работает во всех браузерах. Теоретически, вы бы использовали 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 в 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) приведет к появлению флэш-памяти с неустановленным содержимым ( FOUC ).

61 голосов
/ 28 октября 2015

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

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
48 голосов
/ 22 февраля 2009

Полагаю, что-то вроде этого скрипта подойдет: 

<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 для портлетов» упоминается также возможность 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);
}
//]]>
14 голосов
/ 10 мая 2012

Вызовите следующую функцию для динамической загрузки файла 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.

7 голосов
/ 12 июня 2018

Element.insertAdjacentHTML имеет очень хорошую поддержку браузера и может добавить таблицу стилей в одну строку. 

document.getElementsByTagName("head")[0].insertAdjacentHTML(
    "beforeend",
    "<link rel=\"stylesheet\" href=\"path/to/style.css\" />");
7 голосов
/ 02 декабря 2016

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

// 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 голосов
/ 25 января 2012

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

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

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

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

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

5 голосов
/ 05 июля 2018

В современном браузере вы можете использовать promise вот так. Создайте функцию загрузчика с обещанием: 

function LoadCSS( cssURL ) {

    // 'cssURL' is the stylesheet's URL, i.e. /css/styles.css

    return new Promise( function( resolve, reject ) {

        var link = document.createElement( 'link' );

        link.rel  = 'stylesheet';

        link.href = cssURL;

        document.head.appendChild( link );

        link.onload = function() { 

            resolve(); 

            console.log( 'CSS has loaded!' ); 
        };
    } );
}

Тогда, очевидно, вы хотите что-то сделать после загрузки CSS. Вы можете вызвать функцию, которая должна запускаться после загрузки CSS следующим образом: 

LoadCSS( 'css/styles.css' ).then( function() {

    console.log( 'Another function is triggered after CSS had been loaded.' );

    return DoAfterCSSHasLoaded();
} );

Полезные ссылки, если вы хотите глубже понять, как это работает:

Официальные документы по обещаниям

Полезное руководство к обещаниям

Отличное вступительное видео об обещаниях

3 голосов
/ 27 сентября 2017

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

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);
3 голосов
/ 22 октября 2014

Вот способ с методом создания элемента 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);
Страница:
...