动态载入CSS的两种方法!

2010-03-05 17:34:15

[b]1.通过 文档对象创建 link节点,指定 href,然后 appendChild到页面.[/b] 这种方案大家都用过, 不过,会存在一些问题.什么问题呢?! 跨域 [b]案例[/b]:FF下打开baidu, Firebug下运行以下代码(没有firebug,就去装一个,挺好用的) [code]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);[/code] 然后呢,在baidu搜索框中点一下,竟然报错: Security error" code: "1000 安会域错误, 原因就是点击输出框后 baidu页面的JS会对 styleSheet操作, 而这个styleSheet引用于非 baidu域名, 当然不能写了. 找问题,解决问题搞了天!见下 [b]2.将要载入的CSS文本定义成 JS文件, 通过 script载入文本数据, 将文本写入styleSheet[/b] 动态创建的script标签载入JS变量可以解决跨域, 真是屡试不爽, IE,FF测试正常. 两部分代码如下: 读取JS,相信大家都会[code] 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); }; [/code] 以下是将文本写入CSS的代码, (网上抄的) [code] 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)); } } };[/code] 供大家参考.虽然感觉有点别扭,呵呵....要跨域读静态文本,大家还有何高见, 欢迎赐教! 谢谢