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

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

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

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

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

Ответы [ 15 ]

3 голосов
/ 12 декабря 2010

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

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

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

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

1 голос
/ 06 сентября 2016

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

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

0 голосов
/ 21 октября 2014 
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")

Я использую тимелист, и это нормально работает. Спасибо

Страница:
...