动态载入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));

           }

       }

   };

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