框架页面的换肤实现

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

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

Java代码 复制代码 收藏代码
  1.   
  2. /*  
  3. 保存Cookie  
  4. c_name--key  
  5. value---value  
  6. 默认时长为一年  
  7. */  
  8. function setCookie(c_name, value, expiredays) {   
  9.     var exdate = new Date();   
  10.     exdate.setDate(exdate.getDate() + expiredays);   
  11.     document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + exdate.toGMTString());   
  12. }   
  13. /*  
  14. 获取Cookie,根据c_name--key值来获取  
  15. */  
  16. function getCookie(c_name) {   
  17.     if (document.cookie.length > 0) {   
  18.         var c_start = document.cookie.indexOf(c_name + "=");   
  19.         if (c_start != -1) {   
  20.             c_start = c_start + c_name.length + 1;   
  21.             var c_end = document.cookie.indexOf(";", c_start);   
  22.             if (c_end == -1) {   
  23.                 c_end = document.cookie.length;   
  24.             }   
  25.             return unescape(document.cookie.substring(c_start, c_end));   
  26.         }   
  27.     }   
  28.     return "";   
  29. }   
  30. /*  
  31. 递归换肤  
  32. */  
  33. function changeSkin(winObj, cssPath) {   
  34.     var frames = winObj.frames;   
  35.     for (var i = 0; i < frames.length; i++) {   
  36.         //证明是该页面是框架页面   
  37.         //alert(frames[i].name + ":" + frames[i].frames.length);   
  38.         if (frames[i].frames.length > 0) {   
  39.             //判断页面中是否存在iframe              
  40.             var iframes = frames[i].document.getElementsByTagName("iframe");   
  41.             if(iframes.length > 0){//如果页面含有iframe,那么此页面也需要换肤   
  42.                 var linkObj = frames[i].document.getElementById("style"); //获取link对象   
  43.                 if (linkObj != null) {   
  44.                     linkObj.href = basePath + "/css/" + cssPath + "/test.css";   
  45.                 }   
  46.             }   
  47.             //alert("iframes:" + iframes.length);   
  48.             changeSkin(frames[i], cssPath);//递归换肤   
  49.         } else {   
  50.             //非框架页面,换肤   
  51.             var linkObj = frames[i].document.getElementById("style"); //获取link对象   
  52.             if (linkObj != null) {   
  53.                 linkObj.href = basePath + "/css/" + cssPath + "/test.css";   
  54.             }   
  55.         }   
  56.     }   
  57. }   
  58. /*  
  59. 下拉框调用此方法  
  60. */  
  61. function changeCss(winObj, cssPath) {   
  62.     setCookie("cssPath", cssPath, 365); //设置cookie   
  63.     changeSkin(winObj, cssPath); //换肤   
  64. }  



方法准备好了以后,需要在共享页面(taglibs.jsp)加入以下代码:
Java代码 复制代码 收藏代码
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>   
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>   
  3. <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>   
  4. <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>   
  5. <%@ taglib uri="/struts-tags" prefix="s"%>   
  6. <%@ taglib prefix="page" uri="page-tag"%>   
  7. <%@ page isELIgnored="false"%>   
  8. <c:set var="basePath" value="${pageContext.request.contextPath}" />   
  9. <script type="text/javascript" src="${basePath}/script/skin.js"></script>   
  10. <script type="text/javascript">   
  11. var basePath = '${basePath}'; //基路径   
  12. var cssPath = getCookie("cssPath"); //获取默认皮肤路径   
  13. //判断用户Cookie中是否有路径,无采用默认,有采用用户的信息   
  14. if (cssPath != null && cssPath != ""){   
  15.     document.write("<link href='${basePath}/css/" + cssPath + "/test.css' id='style' rel='stylesheet' type='text/css' />");   
  16. }else{   
  17.     setCookie('cssPath',"blue",365);   
  18.     document.write("<link href='${basePath}/css/blue/test.css' id='style' rel='stylesheet' type='text/css' />");   
  19. }   
  20. </script>  



下拉框的调用:
Java代码 复制代码 收藏代码
  1. <select onchange="changeCss(window.top,this.value)">   
  2.             <option value="blue" selected="selected">   
  3.                 默认皮肤   
  4.             </option>   
  5.             <option value="red">   
  6.                 红海   
  7.             </option>   
  8.             <option value="green">   
  9.                 苍绿   
  10.             </option>   
  11.         </select>  

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ITRoad/p/2280919.html