Theamleaf中整合layui的iframe实现页面嵌入

最新推荐文章于 2024-10-22 12:27:22 发布

qq_1061383457

最新推荐文章于 2024-10-22 12:27:22 发布

阅读量1.6k

点赞数 1

分类专栏： SpringBoot框架文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/adingyb/article/details/121270675

版权

SpringBoot框架专栏收录该内容

20 篇文章 3 订阅

订阅专栏

本文介绍了如何使用layui框架结合iframe技术，实现在管理系统首页通过左侧导航栏的点击事件动态加载不同列表页面。通过设置`th:target`属性，确保列表一点击后能嵌入`tqmContent` iframe中显示 '/list' 页面。

摘要由CSDN通过智能技术生成

为了是实现管理系统首页布局，如下：

layui框架使用后的是iframe技术，如下：

 <div class="layui-body">
        <!-- 内容主体区域 -->
        <!-- 内容主体区域 -->
        <div style="padding: 0px;height: 100%;width: 100%;">
            <iframe th:src="@{/golist}" name="tqmContent"
                    style="border: 0px solid blue;height: 100%;width: 100%;scrolling:auto;"></iframe>
        </div>
    </div>

访问主页后会自动去请求“/golist”，然后将其返回的页面嵌入首页中。

如何在左侧导航栏，点击实现上述功能呢？如下：

<dl class="layui-nav-child">
                        <dd><a href="javascript:;">表格显示</a></dd>
                        <dd><a th:href="@{/list}" th:target="tqmContent">列表一</a></dd>
                        <dd><a href="javascript:;">列表三</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>

点击列表一，就可以去请求“/list”,然后将“/list”返回的页面嵌入页面之中，主要注意