SpringBoot：layui使用iframe标签，点击左侧导航栏，在右侧动态显示页面

Vicki_Lin.zw

已于 2022-08-11 14:35:34 修改

阅读量2.3k

点赞数 1

分类专栏：书籍管理系统文章标签： layui 前端 javascript

于 2022-08-11 14:28:08 首次发布

本文链接：https://blog.csdn.net/qq_44266202/article/details/126283894

版权

书籍管理系统专栏收录该内容

2 篇文章 0 订阅

订阅专栏

其他文件看上一篇内容

http://t.csdn.cn/QElet

左侧菜单代码（index.html）

<ul class="sub-menu">
    <li class="main_left">
        <a data-src="/index/library.do">
            <i class="iconfont">&#xe6a7;</i>
                <cite>图书馆资料列表</cite>
        </a>
</li >

右侧主体代码（index.html）

<div class="page-content">
    <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
        <ul class="layui-tab-title">
            <li class="home main_left"><a data-src="/index/welcome.do"><i class="layui-icon">&#xe68e;</i>我的桌面</a></li>
        </ul>
        <div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
            <dl>
                <dd data-type="this">关闭当前</dd>
                <dd data-type="other">关闭其它</dd>
                <dd data-type="all">关闭全部</dd>
            </dl>
        </div>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <iframe th:src='@{/index/welcome.do}' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
            </div>
            <div class="main_right">
                <iframe frameborder="0" scrolling="yes" style="width: 100%" src="" id="aa">
                </iframe>
            </div>
        </div>
        <div id="tab_show"></div>
    </div>
</div>

script代码（index.html）

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
    });
    $(function(){
        $(".main_left a").on("click",function(){
            var address =$(this).attr("data-src");
            $("iframe").attr("src",address);
        });
        var frame = $("#aa");
        var frameheight = $(window).height();
        console.log(frameheight);
        frame.css("height",frameheight);
    });
</script>

页面需要通过Controller打开

IndexController.java

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/index")
public class IndexController {

    //我的桌面，主页面
    @RequestMapping("/welcome.do")
    public String welcome(){
        return "welcome";
    }

    //图书馆资料列表
    @RequestMapping("/library.do")
    public String library(){
        return "library-list";
    }

}

附上完整代码

index.html

<!doctype html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>中国银行书籍管理系统</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript"src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>

    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <script type="text/javascript" th:src="@{/js/cookie.js}"></script>
    <script>
        // 是否开启刷新记忆tab功能
        // var is_remember = false;
    </script>
</head>
<body>
<!-- 顶部开始 -->
<div class="container">
    <div class="logo"><a href="./index.html">中国银行书籍管理系统</a></div>
    <div class="left_open">
        <i title="展开左侧栏" class="iconfont">&#xe699;</i>
    </div>

    <ul class="layui-nav right" lay-filter="">
        <li class="layui-nav-item">
            <a href="javascript:;">admin</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a >个人信息</a></dd>
                <dd><a >切换帐号</a></dd>
                <dd><a href="./login.html">退出</a></dd>
            </dl>
        </li>
    </ul>

</div>
<!-- 顶部结束 -->
<!-- 中部开始 -->
<!-- 左侧菜单开始 -->
<div class="left-nav">
    <div id="side-nav">
        <ul id="nav">
            <!--图书馆资料维护-->
            <li>
                <a href="javascript:;">
                    <i class="iconfont">&#xe6ae;</i>
                    <cite>图书馆资料维护</cite>
                    <i class="iconfont nav_right">&#xe697;</i>
                </a>
                <ul class="sub-menu">
                    <li class="main_left">
                        <!--th:href="@{/index/library.do}"-->
                        <a data-src="/index/library.do">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>图书馆资料列表</cite>
                        </a>
                    </li >
                </ul>
            </li>
            <!--书籍资料维护-->
            <li>
                <a href="javascript:;">
                    <i class="iconfont">&#xe705;</i>
                    <cite>书籍资料维护</cite>
                    <i class="iconfont nav_right">&#xe697;</i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a _href="books-list.html">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>书籍资料列表</cite>
                        </a>
                    </li >
                    <li>
                        <a _href="barcode-printing.html">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>条形码打印</cite>
                        </a>
                    </li >
                    <li>
                        <a _href="books-sum-list.html">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>书籍汇总列表</cite>
                        </a>
                    </li >
                </ul>
            </li>
            <!--员工资料维护-->
            <li>
                <a href="javascript:;">
                    <i class="iconfont">&#xe726;</i>
                    <cite>员工资料维护</cite>
                    <i class="iconfont nav_right">&#xe697;</i>
                </a>
                <ul class="sub-menu">
                    <li date-refresh="1">
                        <a _href="member-list.html">
                            <i class="iconfont">&#xe6a7;</i>
                            <cite>员工列表</cite>
                        </a>
                    </li>

                </ul>
            </li>
            <!--书籍推荐投票维护-->
            <li>
                <a href="javascript:;">
                    <i class="iconfont">&#xe723;</i>
                    <cite>书籍推荐投票维护</cite>
                    <i class="iconfont nav_right">&#xe697;</i>
                </a>
            </li>
            <!--书籍资料查阅及归还-->
            <li>
                <a href="javascript:;">
                    <i class="iconfont">&#xe6ce;</i>
                    <cite>书籍资料查阅及归还</cite>
                    <i class="iconfont nav_right">&#xe697;</i>
                </a>
            </li>
            <!--书籍推荐-->
            <li>
                <a href="javascript:;">
                    <i class="iconfont">&#xe717;</i>
                    <cite>书籍推荐</cite>
                    <i class="iconfont nav_right">&#xe697;</i>
                </a>
            </li>
            <!--参与推荐书籍投票-->
            <li>
                <a href="javascript:;">
                    <i class="iconfont">&#xe69e;</i>
                    <cite>参与推荐书籍投票</cite>
                    <i class="iconfont nav_right">&#xe697;</i>
                </a>
            </li>

        </ul>
    </div>
</div>
<!-- <div class="x-slide_left"></div> -->
<!-- 左侧菜单结束 -->
<!-- 右侧主体开始 -->
<div class="page-content">
    <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
        <ul class="layui-tab-title">
            <li class="home main_left"><a data-src="/index/welcome.do"><i class="layui-icon">&#xe68e;</i>我的桌面</a></li>
        </ul>
        <div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
            <dl>
                <dd data-type="this">关闭当前</dd>
                <dd data-type="other">关闭其它</dd>
                <dd data-type="all">关闭全部</dd>
            </dl>
        </div>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <iframe th:src='@{/index/welcome.do}' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
            </div>
            <div class="main_right">
                <iframe frameborder="0" scrolling="yes" style="width: 100%" src="" id="aa">
                </iframe>
            </div>
        </div>
        <div id="tab_show"></div>
    </div>
</div>
<div class="page-content-bg"></div>
<!-- 右侧主体结束 -->
<!-- 中部结束 -->
<!-- 底部开始 -->
<div class="footer">
    <div class="copyright"></div>
</div>
<!-- 底部结束 -->

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
    $(function(){
        $(".main_left a").on("click",function(){
            var address =$(this).attr("data-src");
            $("iframe").attr("src",address);
        });

        var frame = $("#aa");
        var frameheight = $(window).height();
        console.log(frameheight);
        frame.css("height",frameheight);


    });

</script>

</body>
</html>

library-list.html

<!doctype html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <script type="text/javascript" th:src="@{/js/cookie.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="x_admin_show('添加用户','./library-add.html',600,400)"><i class="layui-icon"></i>添加</button>
        <span class="x-right" style="line-height:40px">共有数据：88 条</span>
    </xblock>
    <table class="layui-table x-admin">
        <thead>
        <tr>
            <th>
                <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
            </th>
            <th>序号</th>
            <th>图书馆代号</th>
            <th>图书馆名称</th>
            <th>图书馆地址</th>
            <th>借阅时间限制</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>创建人</th>
            <th>更新时间</th>
            <th>修改人</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon">&#xe605;</i></div>
            </td>
            <td>1</td>
            <td>01</td>
            <td>珠海分部图书馆</td>
            <td>珠海吉大</td>
            <td>24</td>
            <td class="td-status">
                <span class="layui-btn layui-btn-normal layui-btn-mini">正常</span></td>
            <td>2015-01-01 10:11:30</td>
            <td>vicki</td>
            <td>2017-01-01 11:11:42</td>
            <td>lily</td>
            <td class="td-manage">
                <a onclick="member_stop(this,'10001')" href="javascript:;"  title="正常">
                    <i class="layui-icon">&#xe601;</i>
                </a>
                <a title="修改"  onclick="x_admin_show('修改','library-edit.html',600,400)" href="javascript:;">
                    <i class="layui-icon">&#xe642;</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="page">
        <div>
            <a class="prev" href="">&lt;&lt;</a>
            <a class="num" href="">1</a>
            <span class="current">2</span>
            <a class="num" href="">3</a>
            <a class="num" href="">489</a>
            <a class="next" href="">&gt;&gt;</a>
        </div>
    </div>

</div>

</body>

</html>