是否有可能导入css样式表到一个html页面使用Javascript?如果是,该怎么做呢?
p.s. javascript将托管在我的网站上,但我希望用户能够把他们的网站的<头>标签,它应该能够导入一个css文件托管在我的服务器到当前的网页。(CSS文件和javascript文件都将托管在我的服务器上)。
是否有可能导入css样式表到一个html页面使用Javascript?如果是,该怎么做呢?
p.s. javascript将托管在我的网站上,但我希望用户能够把他们的网站的<头>标签,它应该能够导入一个css文件托管在我的服务器到当前的网页。(CSS文件和javascript文件都将托管在我的服务器上)。
当前回答
使用以下代码:
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);
其他回答
我想分享一种方法,不仅加载css,但所有的资产(js, css,图像)和处理onload事件的一堆文件。async-assets-loader。请看下面的例子:
<script src="https://unpkg.com/async-assets-loader"></script>
<script>
var jsfile = "https://code.jquery.com/jquery-3.4.1.min.js";
var cssfile = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
var imgfile = "https://logos.keycdn.com/keycdn-logo-black.png";
var assetsLoader = new asyncAssetsLoader();
assetsLoader.load([
{uri: jsfile, type: "script"},
{uri: cssfile, type: "style"},
{uri: imgfile, type: "img"}
], function () {
console.log("Assets are loaded");
console.log("Img width: " + assetsLoader.getLoadedTags()[imgfile].width);
});
</script>
根据async-assets-loader文档
如果你想知道(或等待)直到样式本身加载,这是有效的:
// 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 = () => resolve();
link.onerror = () => reject();
link.href = url;
let headScript = document.querySelector('script');
headScript.parentNode.insertBefore(link, headScript);
});
};
用法:
fetchStyle(url)
.then(
() => console.log("style loaded succesfully"),
() => console.error("style could not be loaded"),
);
你听说过《承诺》吗?它们适用于所有现代浏览器,而且使用起来相对简单。看看这个简单的方法,将css注入到html头部:
function loadStyle(src) {
return new Promise(function (resolve, reject) {
let link = document.createElement('link');
link.href = src;
link.rel = 'stylesheet';
link.onload = () => resolve(link);
link.onerror = () => reject(new Error(`Style load error for ${src}`));
document.head.append(link);
});
}
你可以这样实现它:
window.onload = function () {
loadStyle("https://fonts.googleapis.com/css2?family=Raleway&display=swap")
.then(() => loadStyle("css/style.css"))
.then(() => loadStyle("css/icomoon.css"))
.then(() => {
alert('All styles are loaded!');
}).catch(err => alert(err));
}
这真的很酷,对吧?这是一种使用Promises来决定样式优先级的方法。
要查看多风格加载实现,请参见:https://stackoverflow.com/a/63936671/13720928
有一个通用的jquery插件,可以按需加载css和JS文件的同步和异步。 它还可以跟踪已经加载的内容:) 参见:http://code.google.com/p/rloader/
下面是一个单行示例,使用纯JavaScript根据URL的文件名部分将CSS链接注入到head元素中:
document.head.innerHTML += '<link rel=“stylesheet” href=“css/style.css”>';
大多数浏览器都支持它。查看浏览器兼容性。