一、实现效果
<br>
二、代码实现
1. main.ftl
项目主页面,注意引入layui的css样式和js文件,还要引入aside.ftl
左侧菜单栏 和 main.js
文件。
<#assign base=springMacroRequestContext.contextPath />
...
<div class="layui-layout layui-layout-admin">
<#include "aside.ftl">
<!--tab标签-->
<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
<ul class="layui-tab-title"></ul>
<div class="layui-tab-content"></div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
</div>
</div>
...
tab项是放在<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
这个div中的,其中有一个重要的属性lay-filter,在js中调用的tabAdd,tabDelete等多种方法都携带了这个参数,将tab项放在lay-filter=‘demo’
的div中,可以借助该参数完成指定元素的局部更新。
<br>
2. aside.ftl
data-url=“”
后跟iframe跳转地址。
<br>
3. main.js
element中tabAdd方法,其中content可以是一个iframe
页面,实现了不同页面间的切换:
<br>
参考:
- layui实现左侧菜单点击右侧内容区显示
<br>
三、set 'X-Frame-Options' to 'DENY'错误
1. 具体报错
iframe集成时出现,页面空白,浏览器控制台报错:Refused to display in a frame because it set 'X-Frame-Options' to 'DENY'
2. 解决方法
我使用的框架是SpringBoot并整合了SpringSecurity,拓展WebSecurityConfigurerAdapter
参考:
- SpringBoot异常:Refused to display in a frame because it set 'X-Frame-Options' to 'DENY'
Comments | NOTHING