javascript - llamar - script html ejemplos
¿Cómo cargar archivos CSS usando Javascript? (15)
¿Es posible importar hojas de estilo css en una página html usando Javascript? Si es así, ¿cómo se puede hacer esto?
PD: el javascript estará alojado en mi sitio, pero quiero que los usuarios puedan colocar la etiqueta <head> de su sitio web, y debería poder importar un archivo css alojado en mi servidor en la página web actual. (Tanto el archivo css como el archivo javascript se alojarán en mi servidor).
Aquí está la forma de hacerlo de la "vieja escuela", que con suerte funciona en todos los navegadores. En teoría, usaría setAttribute desafortunadamente, IE6 no lo admite constantemente.
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);
}
Este ejemplo verifica si el CSS ya se agregó, por lo que solo se agrega una vez.
Coloque ese código en un archivo javascript, haga que el usuario final simplemente incluya el javascript y asegúrese de que la ruta CSS sea absoluta para que se cargue desde sus servidores.
Vainilla
Aquí hay un ejemplo que usa JavaScript simple para inyectar un enlace CSS en el elemento principal basado en la parte del nombre de archivo de la 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>
Inserte el código justo antes de la etiqueta de head cierre y el CSS se cargará antes de que se represente la página. El uso de un archivo JavaScript externo ( .js ) hará que aparezca un Flash de contenido sin estilo ( FOUC ).
Aquí hay una forma con el método de creación de elementos de jQuery (mi preferencia) y con la devolución de llamada 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);
Debajo de un código completo usando para cargar JS y / o 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''])) ();
En un navegador moderno puedes usar promise como esta. Crea una función de cargador con una promesa en ella:
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!'' );
};
} );
}
Entonces obviamente quieres que se haga algo después de que se haya cargado el CSS. Puede llamar a la función que debe ejecutarse después de que CSS se haya cargado así:
LoadCSS( ''css/styles.css'' ).then( function() {
console.log( ''Another function is triggered after CSS had been loaded.'' );
return DoAfterCSSHasLoaded();
} );
Enlaces útiles si quieres entender en profundidad cómo funciona:
Hay un plugin de jquery general que carga archivos CSS y JS sincronizados y asych a pedido. También mantiene un registro de lo que ya se ha cargado :) ver: http://code.google.com/p/rloader/
La biblioteca YUI puede ser lo que estás buscando. También es compatible con la carga de dominios cruzados.
Si usas jquery, este plugin hace lo mismo.
Llame a la siguiente función para cargar dinámicamente el archivo CSS o 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)
}
Pase la ruta completa del archivo con el nombre como argumento de nombre de filename .
Puede usarlo para esta biblioteca YUI o usar este link
Sé que este es un hilo bastante viejo pero aquí vienen mis 5 centavos.
Hay otra forma de hacerlo dependiendo de cuáles sean sus necesidades.
Tengo un caso en el que quiero que un archivo css esté activo solo un rato. Como cambiar el css. Activa el css y luego, después de otro evento, desactívalo.
En lugar de cargar el css dinámicamente y luego eliminarlo, puede agregar una clase / un id delante de todos los elementos en el nuevo css y luego simplemente cambiar esa clase / id del nodo base de su css (como la etiqueta del cuerpo).
Con esta solución tendría más archivos css cargados inicialmente, pero tiene una forma más dinámica de cambiar los diseños de css.
Si desea saber (o esperar) hasta que el estilo en sí se haya cargado, esto funciona:
// 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);
});
};
Si usas jquery:
$(''head'').append(''<link rel="stylesheet" type="text/css" href="style.css">'');
Supongo que algo como este script haría:
<script type="text/javascript" src="/js/styles.js"></script>
Este archivo JS contiene la siguiente declaración:
if (!document.getElementById) document.write(''<link rel="stylesheet" type="text/css" href="/css/versions4.css">'');
La dirección de javascript y css debería ser absoluta si se refieren a su sitio.
Muchas técnicas de importación de CSS se tratan en este artículo "Diga no a los trucos de CSS con técnicas de bifurcación" .
Pero el artículo "Uso de JavaScript para agregar dinámicamente hojas de estilo Portlet CSS" también menciona la posibilidad de CreateStyleSheet (método propietario para 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);
}
//]]>
Usa este código:
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);
Element.insertAdjacentHTML tiene muy buena compatibilidad con el navegador y puede agregar una hoja de estilo en una línea.
document.getElementsByTagName("head")[0].insertAdjacentHTML(
"beforeend",
"<link rel=/"stylesheet/" href=/"path/to/style.css/" />");
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")
Estoy usando thymeleaf y esto está funcionando bien. Gracias