Можно ли импортировать CSS-таблицы стилей в html-страницу с помощью Javascript? Если да, то как это можно сделать?Как загрузить файлы CSS с помощью Javascript?
PS javascript будет размещен на моем сайте, но я хочу, чтобы пользователи могли помещать тег <head> своего сайта, и он должен иметь возможность импортировать файл css, размещенный на моем сервере, в текущую веб-страницу , (и файл css, и файл javascript будут размещены на моем сервере).
Вот такой способ «старой школы», который, надеюсь, работает во всех браузерах. Теоретически, вы бы использовали 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 является абсолютным, поэтому он загружается с ваших серверов.
Вот пример, который использует простой 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).
Как запустить обратный вызов после загрузки файла CSS? – jchook
Это довольно сложно сделать надежно. В популярных библиотеках Javascript теперь обычно имеется некоторая форма загрузки javascript и таблиц стилей с обратным вызовом. Например, см. [YUI Get] (http://yuilibrary.com/yui/docs/get/). – 2012-08-05 12:42:16
См. [Ext.util.CSS.swapStyleSheet] (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.CSS-method-swapStyleSheet) для библиотеки Ext JS –
Я думаю, что-то вроде этого сценария будет делать:
<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);
}
//]]>
вот что я придумал для добавления 'document.createStyleSheet()' в браузеры, у которых его нет: http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript/524798 # 524798 – Christoph
Спасибо за отзыв – VonC
Не уверен точно, в каком случае, но в некоторых случаях 'document.write' isn ' рекомендуется, потому что пишет весь сайт вашего сайта. –
Вы можете использовать для этого YUI library или использовать этот article to implement
YUI library может быть то, что вы ищете , Он также поддерживает загрузку кросс-домена.
Если вы используете jquery, this plugin делает то же самое.
Существует общий плагин jquery, который загружает синхронизацию файлов css и JS и asych по требованию. Он также отслеживает от того, что уже было загружено :) смотрите: http://code.google.com/p/rloader/
Я знаю, что это довольно старая нить, но здесь идет мои 5 центов.
Существует другой способ сделать это в зависимости от ваших потребностей.
У меня есть случай, когда я хочу, чтобы файл css был активным только некоторое время. Как css переключения. Активируйте css, а затем после другого события деактивируйте его.
Вместо того, чтобы загружать css динамически, а затем удаляя его, вы можете добавить Class/id перед всеми элементами нового css, а затем просто переключить этот класс/id базового узла вашего css (например, тег body).
Вы бы с этим решением имели больше загружаемых файлов css, но у вас более динамичный способ переключения css-макетов.
Выполните следующую функцию для динамической загрузки файла 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 аргумент.
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")
Я использую тимелеаф, и это хорошо работает. Благодаря
Вот способ с помощью метода создания элемента 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);
Если вы используете JQuery:
$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
Ниже полный код, используя для загрузки 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']))();
Если вы хотите узнать (или подождать) до тех пор, пока стиль 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);
});
};
Как использовать это –
Используйте этот код:
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);
Там также вопрос о том, JQuery http://stackoverflow.com/questions/2685614/load-external-css-file-like -scripts-in-jquery-which-is-compatible-in-ie-также – jcubic