iframe共用css、js文件

因为iframe中调用的页面都将采用统一风格，所以它们会有一些共用的css文件，和一些js文件；如果每个页面都去引用，<link href="Console/Style/Public.css" rel="stylesheet" type="text/css" />或<script language="JavaScript" type="text/javascript" src="Console/JavaScript/Parameter.js"></script>；

的确是比较烦，而用css与js文件比较多，html页面头部的引用代码就有好多，看起来也不爽；于是就想动态加载；

这个功能并不复杂，写了个函数，如下

//动态加载css文件或js文件
function attachFile(iframeId,filename, filetype)
{
var head = window.frames[iframeId].document.getElementsByTagName('head').item(0);
if (filetype=="css"){ //判断文件类型
   var fileref=document.createElement("link");
   fileref.setAttribute("rel", "stylesheet") ;
   fileref.setAttribute("type", "text/css");
   fileref.setAttribute("href", filename);
}
if (filetype=="js"){ //判断文件类型
   var fileref=document.createElement('script');//创建标签
   fileref.setAttribute("type","text/javascript");//定义属性type的值为text/javascrip
   fileref.setAttribute("language","JavaScript");   
   fileref.setAttribute("src", filename);//文件的地址
}
if (typeof fileref!="undefined")   
head.appendChild(fileref);
}

以上代码并不复杂，方法第一个参数是iframe在页面中的id，第二个参数是调用文件的路径，第三个是文件类型，用于判断是css文件还是js文件；

可是执行出错，说“参数错误”；我晕，仔细查看，没有哪里出错啊；郁闷；

搞了半天，好半天，终于明白；对象建错了，低级错误啊，我来说明一下上面的代码；

第四行：var head = window.frames[iframeId].document.getElementsByTagName('head').item(0);

变量head是一个html的节点，但它是当前页面中iframe中的页面节点，并不是当前页面的节点；而第六行
var fileref=document.createElement("link"); 是生成当前页的节点，所以后面倒数第二行的head.appendChild(fileref);自然是无法将子节点添进去，提示参数错误也是正常的了。

修正代码，之后正常，代码如下：
//动态加载css文件或js文件
function attachFile(iframeId,filename, filetype)
{
var head = window.frames[iframeId].document.getElementsByTagName('head').item(0);
if (filetype=="css"){ //判断文件类型
   var fileref=window.frames[iframeId].document.createElement("link");
   fileref.setAttribute("rel", "stylesheet") ;
   fileref.setAttribute("type", "text/css");
   fileref.setAttribute("href", filename);
}
if (filetype=="js"){ //判断文件类型
   var fileref=window.frames[iframeId].document.createElement('script');//创建标签
   fileref.setAttribute("type","text/javascript");//定义属性type的值为text/javascrip
   fileref.setAttribute("language","JavaScript");   
   fileref.setAttribute("src", filename);//文件的地址
}
if (typeof fileref!="undefined")   
head.appendChild(fileref);
}

为了批量添加css文件引用，另外又写了一个方法
//加载所需的css与js文件，该方法仅供managePanle.html页面使用
function attachCssOrJs(iframeId)
{
if(iframeId==null)iframeId="workArea";
//if(window.frames[iframeId]==null)return;
//加载css文件
var cssPath="../Console/Style/";
var cssFile=new Array("Public","Menu","Tree","Context","Accordion");
cssFile.reverse();
for(var i=0;i<cssFile.length;i++)
{
   attachFile(iframeId,cssPath+cssFile[i]+".css", "css");
}
//加载javascript文件
var jsPath="../Console/JavaScript/";
var jsFile=new Array("Parameter","Utilities","XmlHelper","Node","Menu","Drop","Tree","Context","Accordion","MenuEvent");
jsFile.reverse();
for(var i=0;i<jsFile.length;i++)
{
   attachFile(iframeId,jsPath+jsFile[i]+".js", "js");
}
}

一切正常；在iframe中点击右键，查看源码，css文件与Js文件的引用代码都没用了，但是css与js依然在起效果；这算是一种安全措施吧，当用户单独打开一个页面时，将是不正常的，只有在管理界面(managepanel.html)内打开，才是正确的。