是否有可能导入css样式表到一个html页面使用Javascript?如果是，该怎么做呢?
p.s. javascript将托管在我的网站上，但我希望用户能够把他们的网站的<头>标签，它应该能够导入一个css文件托管在我的服务器到当前的网页。(CSS文件和javascript文件都将托管在我的服务器上)。
当前回答
你听说过《承诺》吗?它们适用于所有现代浏览器，而且使用起来相对简单。看看这个简单的方法，将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
其他回答
在现代浏览器中，您可以使用这样的promise。创建一个带有promise的loader函数:
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!' );
};
} );
}
显然，你想在CSS加载后完成一些事情。你可以像这样调用CSS加载后需要运行的函数:
LoadCSS( 'css/styles.css' ).then( function() {
console.log( 'Another function is triggered after CSS had been loaded.' );
return DoAfterCSSHasLoaded();
} );
如果你想深入了解它是如何工作的，有用的链接:
官方承诺文件
有关承诺的有用指南
一个很棒的关于承诺的介绍视频
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")
我用的是百里香叶，效果很好。谢谢
下面是一个单行示例，使用纯JavaScript根据URL的文件名部分将CSS链接注入到head元素中:
document.head.innerHTML += '<link rel=“stylesheet” href=“css/style.css”>';
大多数浏览器都支持它。查看浏览器兼容性。
使用以下代码:
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);
这个函数使用记忆。并且可以多次调用，而不会出现两次加载和运行相同样式表的冲突。而且，它不会在样式表实际加载之前解析。
const loadStyle = function () {
let cache = {};
return function (src) {
return cache[src] || (cache[src] = new Promise((resolve, reject) => {
let s = document.createElement('link');
s.rel = 'stylesheet';
s.href = src;
s.onload = resolve;
s.onerror = reject;
document.head.append(s);
}));
}
}();
请注意函数表达式后面的括号()。
样式表的并行加载:
Promise.all([
loadStyle('/style1.css'),
loadStyle('/style2.css'),
// ...
]).then(() => {
// do something
})
您可以对动态加载脚本使用相同的方法。
