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


230

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

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

  0

Там также вопрос о том, JQuery http://stackoverflow.com/questions/2685614/load-external-css-file-like -scripts-in-jquery-which-is-compatible-in-ie-также 27 авг. 122012-08-27 10:10:19

319

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

+5

Как запустить обратный вызов после загрузки файла CSS? 19 июн. 122012-06-19 03:59:14

+1

Это довольно сложно сделать надежно. В популярных библиотеках Javascript теперь обычно имеется некоторая форма загрузки javascript и таблиц стилей с обратным вызовом. Например, см. [YUI Get] (http://yuilibrary.com/yui/docs/get/). 05 авг. 122012-08-05 12:42:16

  0

См. [Ext.util.CSS.swapStyleSheet] (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.CSS-method-swapStyleSheet) для библиотеки Ext JS 12 фев. 132013-02-12 08:50:32

+9

, возможно, было бы лучше использовать другой символ, чем $ для ярлыка документа, так как он может легко мешать jQuery (как в моем случае);) 04 сен. 132013-09-04 07:44:20

+2

@ zathrus-writer Попробуйте jQuery.noConflic(); http://api.jquery.com/jQuery.noConflict/ 21 ноя. 132013-11-21 06:20:37

+1

@jonnybojangles Использование jQuery.noConflict означает переименование всех ваших ссылок на jQuery как $. Было бы намного проще использовать другое имя переменной для загрузчика CSS. 04 июн. 142014-06-04 15:59:09

  0

@jchook Я смог подключить обратный вызов, добавив 'link.onload = function() {...}' перед добавлением 22 окт. 142014-10-22 18:10:25

  0

Я пробовал этот код, но не работал должным образом 15 авг. 152015-08-15 06:57:51

  0

Отлично. Он работает в хроме! 08 дек. 152015-12-08 05:29:08

  0

К сожалению, это не работает. 23 апр. 172017-04-23 15:09:06

  0

[Как загрузить с помощью jQuery] (https://stackoverflow.com/a/2685661/4632019) 26 фев. 182018-02-26 11:10:09


45

Я думаю, что-то вроде этого сценария будет делать:

<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">'); 

адрес из яваскрипт и CSS должны были бы быть абсолютной, если они для ссылки на ваш сайт.

Многие методы импорта CSS обсуждаются в этой статье "Say no to CSS hacks with branching techniques".

Но "Using JavaScript to dynamically add Portlet CSS stylesheets" статья упоминает также 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); 
} 
//]]> 
  0

вот что я придумал для добавления 'document.createStyleSheet()' в браузеры, у которых его нет: http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript/524798 # 524798 22 фев. 092009-02-22 22:16:03

  0

Спасибо за отзыв 22 фев. 092009-02-22 22:51:46

+1

Не уверен точно, в каком случае, но в некоторых случаях 'document.write' isn ' рекомендуется, потому что пишет весь сайт вашего сайта. 12 авг. 132013-08-12 11:18:45

  0

@VonC, существует ли функция, непосредственно получающая элемент '<style>' вместо предположения, что это первый дочерний элемент '<head>' через '(« head ») [0]'? 30 апр. 142014-04-30 18:32:33

  0

@Pacerier Я считаю, что вы найдете это в https://groups.google.com/forum/#!topic/prototype-scriptaculous/Bs_JYNpoC-k. Это будет, например: 'var style = document.getElementsByTagName (" style ") [0];' 30 апр. 142014-04-30 19:53:57

  0

document.write (url) работал для меня !! 13 июл. 152015-07-13 10:24:30


1

Вы можете использовать для этого YUI library или использовать этот article to implement


2

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

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


3

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


7

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

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

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

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

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


13

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


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

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


3

Вот способ с помощью метода создания элемента 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); 

42

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

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

1

Ниже полный код, используя для загрузки 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']))(); 

5

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

// 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); 
    }); 
}; 
  0

Как использовать это 21 июл. 172017-07-21 08:27:43


1

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

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);