Je možné importovat šablony stylů css do html stránky pomocí Javascriptu? Pokud ano, jak to lze provést?
P.S. javascript bude hostován na mém webu, ale chci, aby uživatelé mohli vložit <head>
tag jejich webu a měl by být schopen importovat soubor css hostovaný na mém serveru do aktuální webové stránky. (soubor css i soubor javascript budou hostovány na mém serveru).
Odpověď
Zde je způsob „staré školy“, který doufejme funguje ve všech prohlížečích. Teoreticky byste použili setAttribute
bohužel jej IE6 nepodporuje konzistentně.
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); }
Tento příklad zkontroluje, zda již byl CSS přidán, takže jej přidá pouze jednou.
Vložte tento kód do souboru javascriptu, požádejte koncového uživatele, aby jednoduše zahrnul javascript a ujistěte se, že cesta CSS je absolutní, aby byla načtena z vašich serverů.
VanillaJS
Zde je příklad, který používá prostý JavaScript k vložení odkazu CSS do head
prvek založený na části názvu souboru adresy 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>
Vložte kód těsně před koncovku head
a CSS bude načteno před vykreslením stránky. Pomocí externího JavaScriptu (.js
) způsobí zobrazení Flash nestylovaného obsahu (FOUC).