动态载入CSS的两种方法

1.通过 文档对象创建 link节点,指定 href,然后 appendChild到页面.

这种方案大家都用过, 不过,会存在一些问题.什么问题呢?! 跨域

案例:FF下打开baidu,  Firebug下运行以下代码(没有firebug,就去装一个,挺好用的)

程序代码

var link = document.createElement("link");

link.rel = "stylesheet";

link.type = "text/css";

link.href = "http://img9.mapbar.com/web/localsearch/version-3.4.5/mapbar.ls.all-min.css";

document.getElementsByTagName("head")[0].appendChild(link);

然后呢,在baidu搜索框中点一下,竟然报错:

Security error" code: "1000

安会域错误, 原因就是点击输出框后 baidu页面的JS会对 styleSheet操作, 而这个styleSheet引用于非 baidu域名, 当然不能写了.

找问题,解决问题搞了天!

2.将要载入的CSS文本定义成 JS文件, 通过 script载入文本数据, 将文本写入styleSheet

动态创建的script标签载入JS变量可以解决跨域,  真是屡试不爽, IE,FF测试正常.

两部分代码如下:

读取JS,相信大家都会

程序代码

loadCSSStyle = function(url){

url = "http://192.168.1.90:8000/js_2_css.js";

var head = document.getElementsByTagName("head")[0];

var script = document.createElement("script");

var thisAim = this;

script.src = url;

script.Onload= script.Onreadystatechange= function(arg){

if(!script.readyState||script.readyState=="loaded"||script.readyState=="complete"){

//JS文件是这么写的 var JS_TO_CSS="body{........无限长的内容..... }";

var a = window["JS_TO_CSS"];

if(a){

setStyleText(a);

}

}

};

head.appendChild(script);

};

以下是将文本写入CSS的代码, (网上抄的)

程序代码

var setStyleText = function(str){

var doc = document;

var h = doc.getElementsByTagName("head")[0];

if(!h)return;

var style = h.getElementsByTagName("style");

var cStyle;

if (style.length == 0) {

if(doc.createStyleSheet){//FF

doc.createStyleSheet();

}else{

cStyle = doc.createElement("style");

cStyle.setAttribute("style","text/css");

h.appendChild(cStyle);

}

}

var tStyle = style[0];

if (tStyle.styleSheet) {

tStyle.styleSheet.cssText +=str;

} else {

if (doc.getBoxObjectFor) {

tStyle.innerHTML += str;

} else {

tStyle.appendChild(doc.createTextNode(str));

}

}

};

供大家参考.虽然感觉有点别扭,呵呵....要跨域读静态文本,大家还有何高见, 欢迎赐教! 

来源：微点阅读  https://www.weidianyuedu.com