框架页面的换肤实现

换肤原理,准备N套皮肤CSS,放在webroot/css/red/test.css, webroot/css/blue/test.css……

程序员只需要通过Cookie来控制red, blue这里的目录,将这里目录变成变量即可,

单页面通过DOM操作Link即可实现,框架页面同样,通过递归即可实现全站换肤,以下为JS代码

/* 保存Cookie c_name--key value---value 默认时长为一年 */ function setCookie(c_name, value, expiredays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + expiredays); document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + exdate.toGMTString()); } /* 获取Cookie,根据c_name--key值来获取 */ function getCookie(c_name) { if (document.cookie.length > 0) { var c_start = document.cookie.indexOf(c_name + "="); if (c_start != -1) { c_start = c_start + c_name.length + 1; var c_end = document.cookie.indexOf(";", c_start); if (c_end == -1) { c_end = document.cookie.length; } return unescape(document.cookie.substring(c_start, c_end)); } } return ""; } /* 递归换肤 */ function changeSkin(winObj, cssPath) { var frames = winObj.frames; for (var i = 0; i < frames.length; i++) { //证明是该页面是框架页面 //alert(frames[i].name + ":" + frames[i].frames.length); if (frames[i].frames.length > 0) { //判断页面中是否存在iframe iframes = frames[i].document.getElementsByTagName("iframe"); if(iframes.length > 0){//如果页面含有iframe,那么此页面也需要换肤 var linkObj = frames[i].document.getElementById("style"); //获取link对象 if (linkObj != null) { linkObj.href = basePath + "/css/" + cssPath + "/test.css"; } } //alert("iframes:" + iframes.length); changeSkin(frames[i], cssPath);//递归换肤 } else { //非框架页面,换肤 var linkObj = frames[i].document.getElementById("style"); //获取link对象 if (linkObj != null) { linkObj.href = basePath + "/css/" + cssPath + "/test.css"; } } } } /* 下拉框调用此方法 */ function changeCss(winObj, cssPath) { setCookie("cssPath", cssPath, 365); //设置cookie changeSkin(winObj, cssPath); //换肤 }

 

方法准备好了以后,需要在共享页面(taglibs.jsp)加入以下代码:

<script type="text/javascript" src="${basePath}/script/skin.js" src="${basePath}/script/skin.js"></script> <script type="text/javascript"> var basePath = '${basePath}'; //基路径 var cssPath = getCookie("cssPath"); //获取默认皮肤路径 //判断用户Cookie中是否有路径,无采用默认,有采用用户的信息 if (cssPath != null && cssPath != ""){ document.write("<link href="${basePath}/css/" + cssPath + "/test.css" href="${basePath}/css/&quot; + cssPath + &quot;/test.css" id='style' rel='stylesheet' type='text/css' />"); }else{ setCookie('cssPath',"blue",365); document.write("<link href="${basePath}/css/blue/test.css" href="${basePath}/css/blue/test.css" id='style' rel='stylesheet' type='text/css' />"); } </script>

 

下拉框的调用:

 <select οnchange="changeCss(window.top,this.value)"> <option value="blue" selected="selected"> 默认皮肤 </option> <option value="red"> 红海 </option> <option value="green"> 苍绿 </option> </select>

 

OK,完成框架网站的全站换肤