是否有可能导入css样式表到一个html页面使用Javascript?如果是,该怎么做呢?

p.s. javascript将托管在我的网站上,但我希望用户能够把他们的网站的<头>标签,它应该能够导入一个css文件托管在我的服务器到当前的网页。(CSS文件和javascript文件都将托管在我的服务器上)。


当前回答

有一个通用的jquery插件,可以按需加载css和JS文件的同步和异步。 它还可以跟踪已经加载的内容:) 参见:http://code.google.com/p/rloader/

其他回答

use:

document.getElementById("of head/body tag")
        .innerHTML += '<link rel="stylesheet" type="text/css" href="style.css">';

下面是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);

这个函数使用记忆。并且可以多次调用,而不会出现两次加载和运行相同样式表的冲突。而且,它不会在样式表实际加载之前解析。

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
})

您可以对动态加载脚本使用相同的方法。

可以用于这个YUI库,也可以使用本文实现

如果你使用jquery:

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');