IE对网页中引入CSS样式表的限制

2019-03-15 00:12:45于海丽

//无法的获取复制到一个数组aCloneLink中
for(vari=aLink.length-1;i>-1;–i){
varo=aLink[i];
if(o.getAttribute&&o.getAttribute(’rel’)===’stylesheet’){
if(o.styleSheet){
aCssText.push(o.styleSheet.cssText);
}else{
aCloneLink.push(o.cloneNode(true));
}
if(i>0){
o.parentNode.removeChild(o);
}
}
}
varoHead=document.getElementsByTagName(’head’)[0];
//通过前面的删除,前31个link或者style标记最多只剩下2个
//通过重新增加link节点的方法激活其styleSheet属性,从而获取样式
for(vari=aCloneLink.length-1;i>-1;–i){
varo=aCloneLink[i];
oHead.appendChild(o);
aCssText.push(o.styleSheet.cssText);
oHead.removeChild(o);
}
//把所有的样式都复制给第一个标签
aSheet[0].cssText =aCssText.join(”);
}
上面仅仅是一个简单的粗糙的解决方案,可以改进的地方还有:
  1、没有考虑media这个属性,如果有多个media应该分别合并,当然更没有考虑link标记的rel="alternatestylesheet"带来的影响。但我更建议通过@media指令把相应的样式写在同一个文件中,至少可以减少HTTP连接数。
  2、没有解决@import指令31次限制的问题,其实可以提取其href值然后进行激活处理。但是实际应用在建议用link标记来替代@import指令,应为在IE中@import指令相当与把link标记写在文档的底部。
  3、一般来讲页面之所有出现大量的link或者style标签很可能有很多是相同的,可以在aCssText合并前除掉相同的项,减少代码量。