frameset 换肤，cookie动态加载css

最新推荐文章于 2022-04-24 10:14:52 发布

mmddonkey

最新推荐文章于 2022-04-24 10:14:52 发布

阅读量123

点赞数

文章标签： html cookie css换肤

本文链接：https://blog.csdn.net/mmddonkey/article/details/84043145

版权

frameSet页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	    <title>跳转页</title>
	</head>
	<frameset cols="*" rows="75,*" style="height: 100%; overflow:hidden;">
		<frame id="head" scrolling="no" marginwidth="0" marginheight="0" src="<%=request.getContextPath() %>/Login_loginTop" name="topFrame" frameborder="0" scrolling="no" noresize="noresize" id="topFrame"/>
		<frameset  cols="185,8,*" id="myFrame" >
			<frame frameborder="0" scrolling="auto" src="<%=request.getContextPath() %>/LeftMenu_leftMenuShow" name="leftFrame" id="leftFrame"/>
			<frame frameborder="0" scrolling="no" noresize="noresize" id="midFrame" name="midFrame" src="<%=request.getContextPath() %>/Login_loginSwitch"/>
			<frame frameborder="0" scrolling="auto" src="<%=request.getContextPath() %>/Login_loginRight" name="main"  id="main"/>
	    </frameset>
	    <noframes></noframes>
	</frameset>
</html>

topFrame:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>frame top page</title>
		<%@ include file="/cssBasePage.jsp"%>
<script type="text/javascript">

	
	// 设置样式
	function setCssFile(id){
		//switchSkin(id);
		$("#cssfile").attr("href","css/"+ id +".css"); //设置不同皮肤
		try{
			$(window.parent.frames['main'].document).find("#cssfile").attr("href","css/"+ id +".css");
			$(window.parent.frames['leftFrame'].document).find("#cssfile").attr("href","css/"+ id +".css");
			$(window.parent.frames['midFrame'].document).find("#cssfile").attr("href","css/"+ id +".css");
		}catch(e){ }
		$.cookie( "b2cPlatform" ,  id , { path: '/', expires: 10 });
	}
</script>
	</head>

	<body  style="height: 100%; overflow:hidden;">
		<div class="jf_top">
			<div class="skin">
				<a href="javascript:setCssFile('jf_blue');"><img width="15" height="16" alt="grass" src="images/ocean.gif" /></a>
				<a href="javascript:setCssFile('jf_red');"><img width="15" height="16" alt="grass" src="images/oyster.gif" /></a>
				<a href="javascript:setCssFile('jf_green');"><img width="15" height="16" alt="grass" src="images/grass.gif" /></a>
			</div>
			
		</div>
	</body>
</html>

需要换肤的页面引入:

<link href="<%=path %>/css/${cookie.b2cPlatform.value==null?'jf_blue':cookie.b2cPlatform.value}.css" rel="stylesheet" type="text/css"  id="cssfile" />

默认为jf_blue.css.
操作cookie引用了jquery.cookie.js。