java web换肤_框架页面的换肤实现

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

程序员只需要通过Cookie来控制red, blue这里的目录,将这里目录变成变量即可,单页面通过DOM操作Link即可实现,框架页面同样,通过递归即可实现全站换肤,以下为JS代码

Java代码  

/*

保存Cookie

c_name--key

value---value

默认时长为一年

*/

function setCookie(c_name, value, expiredays) {

var exdate =newDate();

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;

}

returnunescape(document.cookie.substring(c_start, c_end));

}

}

return"";

}

/*

递归换肤

*/

function changeSkin(winObj, cssPath) {

var frames = winObj.frames;

for(var i =0; i 

//证明是该页面是框架页面

//alert(frames[i].name + ":" + frames[i].frames.length);

if(frames[i].frames.length >0) {

//判断页面中是否存在iframe

var 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);//换肤

}/*

保存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

var 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)加入以下代码:

Java代码  

var basePath ='${basePath}';//基路径

var cssPath = getCookie("cssPath");//获取默认皮肤路径

//判断用户Cookie中是否有路径,无采用默认,有采用用户的信息

if(cssPath !=null&& cssPath !=""){

document.write("");

}else{

setCookie('cssPath',"blue",365);

document.write("");

}

var basePath = '${basePath}'; //基路径

var cssPath = getCookie("cssPath"); //获取默认皮肤路径

//判断用户Cookie中是否有路径,无采用默认,有采用用户的信息

if (cssPath != null && cssPath != ""){

document.write("");

}else{

setCookie('cssPath',"blue",365);

document.write("");

}

下拉框的调用:

Java代码  

默认皮肤

红海

苍绿