layui iframe版动态菜单解决方案

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>xxxxxxx</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
</head>
<body class="layui-layout-body">
  
  <div id="LAY_app">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <!-- 头部区域 -->
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item layadmin-flexible" lay-unselect>
            <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
              <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
            </a>
          </li>
          <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;" layadmin-event="refresh" title="刷新">
              <i class="layui-icon layui-icon-refresh-3"></i>
            </a>
          </li>
        </ul>
        <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
          <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;">
              <cite id="userName">物资管理员</cite>
            </a>
            <dl class="layui-nav-child">
   <!--           <dd><a lay-href="set/user/info.html">基本资料</a></dd>-->
              <dd id="updatePassword"><!--<a lay-href="users/password.html">修改密码</a>--></dd>
              <hr>
              <dd id="logout" style="text-align: center;"><a style="cursor: pointer">退出</a></dd>
            </dl>
          </li>

        </ul>
      </div>
      
      <!-- 侧边菜单 -->
      <div class="layui-side layui-side-menu">
        <div class="layui-side-scroll">
          <div class="layui-logo" lay-href="home/console.html">
            <span>云酒店平台OTA1.1</span>
          </div>
          
          <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
                
          </ul>
        </div>
      </div>

      <!-- 页面标签 -->
      <div class="layadmin-pagetabs" id="LAY_app_tabs">
        <!--<div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>-->
        <!--<div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>-->
        <div class="layui-icon layadmin-tabs-control layui-icon-down">
          <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
            <li class="layui-nav-item" lay-unselect>
              <a href="javascript:;"></a>
              <dl class="layui-nav-child layui-anim-fadein">
                <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
              </dl>
            </li>
          </ul>
        </div>
        <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
          <ul class="layui-tab-title" id="LAY_app_tabsheader">
            <li lay-id="home/console.html" lay-attr="home/console.html" class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
          </ul>
        </div>
      </div>
      
      
      <!-- 主体内容 -->
      <div class="layui-body" id="LAY_app_body">
        <div class="layadmin-tabsbody-item layui-show">
          <iframe src="" frameborder="0" class="layadmin-iframe" id="fIndex"></iframe>
        </div>
      </div>
      
      <!-- 辅助元素,一般用于移动设备下遮罩 -->
      <div class="layadmin-body-shade" layadmin-event="shade"></div>
    </div>
  </div>

  <script src="../layuiadmin/layui/layui.js"></script>
  <script>
      //alert(getCookie("token"))
      layui.use('layer', function(){
          var $ = layui.$ //由于layer弹层依赖jQuery,所以可以直接得到
              ,layer = layui.layer;
          var html="";
          var userName="";
          //console.log("token1:"+ getCookie("token"));
          $.ajax({
              type: "POST",
              url: "/selectUserPower"  //这里是你的接口数据 示例 {"msg":"success","code":0,"data":[{"mid":8,"mname":"财务管理","pmid":0,"url":null,"icons":"layui-icon  layui-icon-rmb","sort":0,"childList":[{"mid":9,"mname":"财务视图","pmid":8,"url":"/views/finance/index.html","icons":null,"sort":0,"childList":null},{"mid":12,"mname":"财务配置","pmid":8,"url":"/views/finance/setting.html","icons":null,"sort":0,"childList":null},{"mid":10,"mname":"财务进账","pmid":8,"url":"/views/finance/income.html","icons":null,"sort":1,"childList":null},{"mid":11,"mname":"财务结算","pmid":8,"url":"/views/finance/settlement.html","icons":null,"sort":2,"childList":null}]},{"mid":5,"mname":"酒店管理","pmid":0,"url":null,"icons":"layui-icon layui-icon-tree","sort":1,"childList":[{"mid":6,"mname":"酒店列表","pmid":5,"url":"/views/hotel/hotelList.html","icons":null,"sort":0,"childList":null},{"mid":7,"mname":"酒店导入","pmid":5,"url":"/views/hotel/importHotel.html","icons":null,"sort":0,"childList":null}]},{"mid":1,"mname":"系统管理","pmid":0,"url":null,"icons":"layui-icon layui-icon-set","sort":2,"childList":[{"mid":3,"mname":"权限组管理","pmid":1,"url":"/views/admin/role/userPower.html","icons":null,"sort":0,"childList":null},{"mid":2,"mname":"管理员管理","pmid":1,"url":"/views/admin/user/userList.html","icons":"","sort":1,"childList":null},{"mid":4,"mname":"分类管理","pmid":1,"url":"/views/admin/type/typeList.html","icons":null,"sort":1,"childList":null}]}],"userName":"admin"}
              dataType: "json",
              async: false,
              success: function(res){
                  if(res.code==-1){
                      window.location.href="/views/login.html"  //这里是session失效返回登录的 后台配置 不要在意
                  }else{
                      var data=res.data;
                      userName=res.userName;  //后台传的登录人 不要的话后台可以不传
                      var t=0;
                      for (var i=0;i<data.length;i++){  //主菜单的数据
                          html+='<li data-name="home" class="layui-nav-item">
'+
                              '<a href="javascript:;" lay-tips="'+data[i]["mname"]+'" lay-direction="2">
' +
                              '                <i class="'+data[i]["icons"]+'"></i>
' +
                              '                <cite>'+data[i]["mname"]+'</cite>
' +
                              '              </a>
';
                          var child=data[i]["childList"];
                          if(child.length!=0){
                              html+='<dl class="layui-nav-child">
';
                          }

                          for(var j=0;j<child.length;j++){  //二级菜单的数据 如果你有三级菜单的话 我就没法了 
                              if(t==0){
                                  if(j==0){
                                      console.log(child[j]["url"])
                                      t=1;
                                      $("#fIndex").attr("src",child[j]["url"]+"?token="+getCookie("token"))
                                  }
                              }

                              html+='  <dd data-name="home" class="">
' +
                                  '                      <a lay-href="'+child[j]["url"]+'?token='+getCookie("token")+'">'+child[j]["mname"]+'</a>
' +
                                  '                      </dd>
'
                          }
                          if(child.length!=0){
                              html+='</dl>
';
                          }
                          html+='</li>';
                      }

                  }

              }

          });


          $("#userName").html(userName);

          $("#LAY-system-side-menu").html(html)

          var pw='<a lay-href="/views/system/password.html?token='+getCookie("token")+'" style="text-align: center;">修改密码</a>';
          $("#updatePassword").html(pw)
      });

  layui.config({
    base: '../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use('index',function () {
      var $ = layui.$
      $("#logout").click(function () {
          clearCookie("token");
          window.open("/login.html","_top")
      })
  });
  </script>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>xxxxxxx</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
</head>
<body class="layui-layout-body">

<div id="LAY_app">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<!-- 头部区域 -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item layadmin-flexible" lay-unselect>
<a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
<i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
</a>
</li>
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;" layadmin-event="refresh" title="刷新">
<i class="layui-icon layui-icon-refresh-3"></i>
</a>
</li>
</ul>
<ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;">
<cite id="userName">物资管理员</cite>
</a>
<dl class="layui-nav-child">
<!-- <dd><a lay-href="set/user/info.html">基本资料</a></dd>-->
<dd id="updatePassword"><!--<a lay-href="users/password.html">修改密码</a>--></dd>
<hr>
<dd id="logout" style="text-align: center;"><a style="cursor: pointer">退出</a></dd>
</dl>
</li>

</ul>
</div>

<!-- 侧边菜单 -->
<div class="layui-side layui-side-menu">
<div class="layui-side-scroll">
<div class="layui-logo" lay-href="home/console.html">
<span>云酒店平台OTA1.1</span>
</div>

<ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">

</ul>
</div>
</div>

<!-- 页面标签 -->
<div class="layadmin-pagetabs" id="LAY_app_tabs">
<!--<div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>-->
<!--<div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>-->
<div class="layui-icon layadmin-tabs-control layui-icon-down">
<ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;"></a>
<dl class="layui-nav-child layui-anim-fadein">
<dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
<dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
<dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
</dl>
</li>
</ul>
</div>
<div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
<ul class="layui-tab-title" id="LAY_app_tabsheader">
<li lay-id="home/console.html" lay-attr="home/console.html" class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
</ul>
</div>
</div>


<!-- 主体内容 -->
<div class="layui-body" id="LAY_app_body">
<div class="layadmin-tabsbody-item layui-show">
<iframe src="" frameborder="0" class="layadmin-iframe" id="fIndex"></iframe>
</div>
</div>

<!-- 辅助元素,一般用于移动设备下遮罩 -->
<div class="layadmin-body-shade" layadmin-event="shade"></div>
</div>
</div>

<script src="../layuiadmin/layui/layui.js"></script>
<script>
//alert(getCookie("token"))
layui.use('layer', function(){
var $ = layui.$ //由于layer弹层依赖jQuery,所以可以直接得到
,layer = layui.layer;
var html="";
var userName="";
//console.log("token1:"+ getCookie("token"));
$.ajax({
type: "POST",
url: "/selectUserPower" //这里是你的接口数据 示例 {"msg":"success","code":0,"data":[{"mid":8,"mname":"财务管理","pmid":0,"url":null,"icons":"layui-icon layui-icon-rmb","sort":0,"childList":[{"mid":9,"mname":"财务视图","pmid":8,"url":"/views/finance/index.html","icons":null,"sort":0,"childList":null},{"mid":12,"mname":"财务配置","pmid":8,"url":"/views/finance/setting.html","icons":null,"sort":0,"childList":null},{"mid":10,"mname":"财务进账","pmid":8,"url":"/views/finance/income.html","icons":null,"sort":1,"childList":null},{"mid":11,"mname":"财务结算","pmid":8,"url":"/views/finance/settlement.html","icons":null,"sort":2,"childList":null}]},{"mid":5,"mname":"酒店管理","pmid":0,"url":null,"icons":"layui-icon layui-icon-tree","sort":1,"childList":[{"mid":6,"mname":"酒店列表","pmid":5,"url":"/views/hotel/hotelList.html","icons":null,"sort":0,"childList":null},{"mid":7,"mname":"酒店导入","pmid":5,"url":"/views/hotel/importHotel.html","icons":null,"sort":0,"childList":null}]},{"mid":1,"mname":"系统管理","pmid":0,"url":null,"icons":"layui-icon layui-icon-set","sort":2,"childList":[{"mid":3,"mname":"权限组管理","pmid":1,"url":"/views/admin/role/userPower.html","icons":null,"sort":0,"childList":null},{"mid":2,"mname":"管理员管理","pmid":1,"url":"/views/admin/user/userList.html","icons":"","sort":1,"childList":null},{"mid":4,"mname":"分类管理","pmid":1,"url":"/views/admin/type/typeList.html","icons":null,"sort":1,"childList":null}]}],"userName":"admin"}
dataType: "json",
async: false,
success: function(res){
if(res.code==-1){
window.location.href="/views/login.html" //这里是session失效返回登录的 后台配置 不要在意
}else{
var data=res.data;
userName=res.userName; //后台传的登录人 不要的话后台可以不传
var t=0;
for (var i=0;i<data.length;i++){ //主菜单的数据
html+='<li data-name="home" class="layui-nav-item"> '+
'<a href="javascript:;" lay-tips="'+data[i]["mname"]+'" lay-direction="2"> ' +
' <i class="'+data[i]["icons"]+'"></i> ' +
' <cite>'+data[i]["mname"]+'</cite> ' +
' </a> ';
var child=data[i]["childList"];
if(child.length!=0){
html+='<dl class="layui-nav-child"> ';
}

for(var j=0;j<child.length;j++){ //二级菜单的数据 如果你有三级菜单的话 我就没法了
if(t==0){
if(j==0){
console.log(child[j]["url"])
t=1;
$("#fIndex").attr("src",child[j]["url"]+"?token="+getCookie("token"))
}
}

html+=' <dd data-name="home" class=""> ' +
' <a lay-href="'+child[j]["url"]+'?token='+getCookie("token")+'">'+child[j]["mname"]+'</a> ' +
' </dd> '
}
if(child.length!=0){
html+='</dl> ';
}
html+='</li>';
}

}

}

});


$("#userName").html(userName);

$("#LAY-system-side-menu").html(html)

var pw='<a lay-href="/views/system/password.html?token='+getCookie("token")+'" style="text-align: center;">修改密码</a>';
$("#updatePassword").html(pw)
});

layui.config({
base: '../layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use('index',function () {
var $ = layui.$
$("#logout").click(function () {
clearCookie("token");
window.open("/login.html","_top")
})
});
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/ushowtime/p/11799639.html