框架页面的换肤实现

换肤原理,准备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
            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)加入以下代码:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib prefix="page" uri="page-tag"%>
<%@ page isELIgnored="false"%>
<c:set var="basePath" value="${pageContext.request.contextPath}" />
<script type="text/javascript" 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' id='style' rel='stylesheet' type='text/css' />");
}else{
    setCookie('cssPath',"blue",365);
    document.write("<link href='${basePath}/css/blue/test.css' id='style' rel='stylesheet' type='text/css' />");
}
</script>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib prefix="page" uri="page-tag"%>
<%@ page isELIgnored="false"%>
<c:set var="basePath" value="${pageContext.request.contextPath}" />
<script type="text/javascript" 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' id='style' rel='stylesheet' type='text/css' />");
}else{
	setCookie('cssPath',"blue",365);
	document.write("<link href='${basePath}/css/blue/test.css' id='style' rel='stylesheet' type='text/css' />");
}
</script>

下拉框的调用:

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

转自：http://zhanghaidang.iteye.com/blog/692053