框架页面的换肤实现

最新推荐文章于 2022-02-25 20:00:37 发布

原创最新推荐文章于 2022-02-25 20:00:37 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#框架 #CSS #C #C# #C++

本文介绍了一种通过修改CSS文件实现网站换肤的技术方案。利用JavaScript设置和读取Cookie来记录用户选择的主题，并通过DOM操作动态加载不同主题的CSS文件。支持单页面及框架页面的全站换肤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

换肤原理,准备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); //换肤
}

方法准备好了以后,需要在共享页面(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>

下拉框的调用:


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