一键切换皮肤的解决思想及iframe嵌套时寻找下级iframe的方法

　　项目中有个一键切换皮肤的功能，感觉还不错，记录下，就是各颜色样式设置起来太复杂了，不知道有没有更简便的方法：

1、切换皮肤结构层

<li title="<s:text name='cems.skin'/>">
<a data-toggle="collapse" href="#colorPick"><img  src="${basePath}/images/homePageicon/colorPick.png" /></a>
</li>

使用"Bootstrap 折叠（Collapse）插件"：下面网站可以详细学习

Bootstrap 折叠（Collapse）插件：http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html

2、切换皮肤表示层

3、切换皮肤行为层

$("#colorPick  a").click(function(){
    var oldcolor= $.cookie("color");    //获取cookie里存的color
    var color=$(this).attr("data-skin");    //获取当前点击的元素的color，为属性data-skin的值
    var len=$("#content-main .LRADMS_iframe").length;    //获取iframe元素的个数
    for(var i=0; i<len;i++){
        var obj= $("#content-main .LRADMS_iframe")[i].contentDocument.body;        //循环获取各iframe里的body
        $(obj).removeClass(oldcolor);    //该body是修改各iframe里的body的样式
        $(obj).addClass(color);
    }
    $.cookie("color", color);    //设置cookie里的值为新值
    $("body").removeClass(oldcolor);    //该body是自身html里body的样式
    $("body").addClass(color);
});

最后就是各颜色对应一套样式体系：

.skin-red .btn-default
{
    color:#DD4B39;
}

.skin-yellow .btn-default
{
    color:#F39C12;
}

.skin-blue .btn-primary:hover
{
    background-color:#007AFF;
    border:1px solid #007AFF;
    color:#fff;
}

 补充完善：

上面是一层iframe的情况，但是实际项目中还会碰到很多层iframe嵌套的情况，就像下面这样：

$("#colorPick  a").click(function(){
    var oldcolor= $.cookie("color");
    var color=$(this).attr("data-skin");
    var len=$("#content-main .LRADMS_iframe").length;
    for(var i=0; i<len;i++){
        var obj= $("#content-main .LRADMS_iframe")[i].contentDocument.body;
        $(obj).removeClass(oldcolor);
        $(obj).addClass(color);
    }

    var len2=$(".layui-layer-iframe iframe").length;
    for(var j=0;j<len2;j++){
        var obj= $(".layui-layer-iframe iframe")[j].contentDocument.body;
        $(obj).removeClass(oldcolor);
          $(obj).addClass(color);

       var len3=$(".layui-layer-iframe iframe").contents().find("iframe").length;
        for(var a=0;a<len3;a++){
            var obja= $(".layui-layer-iframe iframe").contents().find("iframe")[a].contentDocument.body;
            $(obja).removeClass(oldcolor);
            $(obja).addClass(color);
        }
    }

    $.cookie("color", color);
    $("body").removeClass(oldcolor);
    $("body").addClass(color);
  
});

标红处为iframe嵌套时寻找下级iframe的方法

此外，如果是在iframe的页面使用 $.cookie() 方法是会报错$.cookie() is not a function的错误，原因是cookie在window下才有；

因此在iframe的页面需要使用 top.$.cookie() 才会获取到cookie值

//iframe页面使用top.$.cookie()
 window.onload = function(){
     var color = top.$.cookie("color");
     $("body").addClass(color);
 }