一键切换皮肤的解决思想及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=; 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=; 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=;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=;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);

 }

巴特西

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

最新文章

热门文章