SpringBoot使用thymeleaf:fragment 引用iframe的一些小问题。
页面要实现内容跟着左侧导航进行改变需要用到iframer。
然后发现无法找到我引入的页面检查路径也没发现什么不对。
<iframe src="page/main.html" src="/admin/page/main"></iframe>
然后用thymeleaf的标签库来尝试
<iframe src="page/main.html" th:src="@{/admin/page/main}"></iframe>
<iframe src="page/main.html" th:src="@{/templates/admin/page/main}"></iframe>
实在令人费解而且摸不着头脑。
记忆中模糊的记得thymeleaf引入页面是有特定的方式的。
然后就用th:fragment试一试。
<!--假如这是一个公共的页面-->
<a th:fragment="bar">pick Me</a>
<!--th:insert:保留自己的主标签,保留th:fragment的主标签。-->
<div th:insert="a :: bar"></div>
<!--th:replace:不要自己的主标签,保留th:fragment的主标签。-->
<div th:replace="a :: bar"></div>
<!--th:include:保留自己的主标签,不要th:fragment的主标签。-->
<div th:include="a :: bar"></div>
返回的HTML将会是
<!--公共的页面不显示了-->
<!--th:insert-->
<div><a>pick Me</a></div>
<!--th:replace-->
<a>pick Me</a>
<!--th:include-->
<div>pick Me</div>
所以我改了之后
<!--右侧内容 -->
<div class="layui-tab-content clildFrame">
div class="layui-tab-item layui-show">
<!--<iframe src="page/main.html" th:src="@{/admin/page/main}"></iframe>-->
<iframe th:replace="admin/page/main::html"></iframe>
</div>
</div>
这样是没有问题了但是我的内容是根据左侧导航来控制的,而我数据库的url是
Tab.js的动态如下
var tabFilter, menu = [],
liIndex, curNav, delMenu;
layui.define(["element", "jquery"], function (exports) {
var element = layui.element,
$ = layui.jquery,
layId,
Tab = function () {
this.tabConfig = {
closed: true,
openTabNum: undefined, //最大可打开窗口数量
tabFilter: "bodyTab", //添加窗口的filter
url: undefined //获取菜单json地址
}
};
//获取二级菜单数据
Tab.prototype.render = function () {
var url = this.tabConfig.url;
$.get(url, function (data) {
//显示左侧菜单
if ($(".navBar").html() == '') {
var _this = this;
$(".navBar").html(navBar(data)).height($(window).height() - 245);
element.init(); //初始化页面元素
$(window).resize(function () {
$(".navBar").height($(window).height() - 245);
})
}
})
}
//参数设置
Tab.prototype.set = function (option) {
var _this = this;
$.extend(true, _this.tabConfig, option);
return _this;
};
//通过title获取lay-id
Tab.prototype.getLayId = function (title) {
$(".layui-tab-title.top_tab li").each(function () {
if ($(this).find("cite").text() == title) {
layId = $(this).attr("lay-id");
}
})
return layId;
}
//通过title判断tab是否存在
Tab.prototype.hasTab = function (title) {
var tabIndex = -1;
$(".layui-tab-title.top_tab li").each(function () {
if ($(this).find("cite").text() == title) {
tabIndex = 1;
}
})
return tabIndex;
}
//右侧内容tab操作
var tabIdIndex = 0;
Tab.prototype.tabAdd = function (_this) {
if (window.sessionStorage.getItem("menu")) {
menu = JSON.parse(window.sessionStorage.getItem("menu"));
}
var that = this;
var closed = that.tabConfig.closed,
openTabNum = that.tabConfig.openTabNum;
tabFilter = that.tabConfig.tabFilter;
if (_this.attr("target") == "_blank") {
window.location.href = _this.attr("data-url");
} else if (_this.attr("data-url") != undefined) {
var title = '';
if (_this.find("i.iconfont,i.layui-icon").attr("data-icon") != undefined) {
if (_this.find("i.layui-icon").attr("data-icon") != undefined) {
title += '<i class="layui-icon ' + _this.find("i.layui-icon").attr("data-icon") + '"></i>';
} else {
title += '<i class="iconfont">' + _this.find("i.iconfont").attr("data-icon") + '</i>';
}
}
//已打开的窗口中不存在
if (that.hasTab(_this.find("cite").text()) == -1 && _this.siblings("dl.layui-nav-child").length == 0) {
if ($(".layui-tab-title.top_tab li").length == openTabNum) {
layer.msg('只能同时打开' + openTabNum + '个选项卡哦。不然系统会卡的!');
return;
}
tabIdIndex++;
title += '<cite>' + _this.find("cite").text() + '</cite>';
title += '<i class="layui-icon layui-unselect layui-tab-close" data-id="' + tabIdIndex + '">ဆ</i>';
element.tabAdd(tabFilter, {
title: title,
//"<iframe th:replace='" + menu[i].href + "' data-id='" + menu[i].layId + "'></frame>",
content: "<iframe src='" + _this.attr("data-url") + "' data-id='" + tabIdIndex + "'></frame>",
id: new Date().getTime()
})
//当前窗口内容
var curmenu = {
"icon": _this.find("i.layui-icon").attr("data-icon") != undefined ? _this.find("i.layui-icon").attr("data-icon") : _this.find("i.iconfont").attr("data-icon"),
"title": _this.find("cite").text(),
"href": _this.attr("data-url"),
"layId": new Date().getTime()
}
menu.push(curmenu);
window.sessionStorage.setItem("menu", JSON.stringify(menu)); //打开的窗口
window.sessionStorage.setItem("curmenu", JSON.stringify(curmenu)); //当前的窗口
element.tabChange(tabFilter, that.getLayId(_this.find("cite").text()));
that.tabMove(); //顶部窗口是否可滚动
} else {
//当前窗口内容
var curmenu = {
"icon": _this.find("i.layui-icon").attr("data-icon") != undefined ? _this.find("i.layui-icon").attr("data-icon") : _this.find("i.iconfont").attr("data-icon"),
"title": _this.find("cite").text(),
"href": _this.attr("data-url")
}
window.sessionStorage.setItem("curmenu", JSON.stringify(curmenu)); //当前的窗口
element.tabChange(tabFilter, that.getLayId(_this.find("cite").text()));
that.tabMove(); //顶部窗口是否可滚动
}
}
}
//顶部窗口移动
Tab.prototype.tabMove = function () {
$(window).on("resize", function () {
var topTabsBox = $("#top_tabs_box"),
topTabsBoxWidth = $("#top_tabs_box").width(),
topTabs = $("#top_tabs"),
topTabsWidth = $("#top_tabs").width(),
tabLi = topTabs.find("li.layui-this"),
top_tabs = document.getElementById("top_tabs");
;
if (topTabsWidth > topTabsBoxWidth) {
if (tabLi.position().left > topTabsBoxWidth || tabLi.position().left + topTabsBoxWidth > topTabsWidth) {
topTabs.css("left", topTabsBoxWidth - topTabsWidth);
} else {
topTabs.css("left", -tabLi.position().left);
}
//拖动效果
var flag = false;
var cur = {
x: 0,
y: 0
}
var nx, dx, x;
function down() {
flag = true;
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
cur.x = touch.clientX;
dx = top_tabs.offsetLeft;
}
function move() {
var self = this;
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
if (flag) {
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
nx = touch.clientX - cur.x;
x = dx + nx;
if (x > 0) {
x = 0;
} else {
if (x < topTabsBoxWidth - topTabsWidth) {
x = topTabsBoxWidth - topTabsWidth;
} else {
x = dx + nx;
}
}
top_tabs.style.left = x + "px";
//阻止页面的滑动默认事件
document.addEventListener("touchmove", function () {
event.preventDefault();
}, false);
}
}
//鼠标释放时候的函数
function end() {
flag = false;
}
//pc端拖动效果
topTabs.on("mousedown", down);
topTabs.on("mousemove", move);
$(document).on("mouseup", end);
//移动端拖动效果
topTabs.on("touchstart", down);
topTabs.on("touchmove", move);
topTabs.on("touchend", end);
} else {
//移除pc端拖动效果
topTabs.off("mousedown", down);
topTabs.off("mousemove", move);
topTabs.off("mouseup", end);
//移除移动端拖动效果
topTabs.off("touchstart", down);
topTabs.off("touchmove", move);
topTabs.off("touchend", end);
topTabs.removeAttr("style");
return false;
}
}).resize();
}
$("body").on("click", ".top_tab li", function () {
//切换后获取当前窗口的内容
var curmenu = '';
var menu = JSON.parse(window.sessionStorage.getItem("menu"));
if (window.sessionStorage.getItem("menu")) {
curmenu = menu[$(this).index() - 1];
}
if ($(this).index() == 0) {
window.sessionStorage.setItem("curmenu", '');
} else {
window.sessionStorage.setItem("curmenu", JSON.stringify(curmenu));
if (window.sessionStorage.getItem("curmenu") == "undefined") {
//如果删除的不是当前选中的tab,则将curmenu设置成当前选中的tab
if (curNav != JSON.stringify(delMenu)) {
window.sessionStorage.setItem("curmenu", curNav);
} else {
window.sessionStorage.setItem("curmenu", JSON.stringify(menu[liIndex - 1]));
}
}
}
element.tabChange(tabFilter, $(this).attr("lay-id")).init();
// new Tab().tabMove();
})
//删除tab
$("body").on("click", ".top_tab li i.layui-tab-close", function () {
//删除tab后重置session中的menu和curmenu
liIndex = $(this).parent("li").index();
var menu = JSON.parse(window.sessionStorage.getItem("menu"));
//获取被删除元素
delMenu = menu[liIndex - 1];
var curmenu = window.sessionStorage.getItem("curmenu") == "undefined" ? undefined : window.sessionStorage.getItem("curmenu") == "" ? '' : JSON.parse(window.sessionStorage.getItem("curmenu"));
if (JSON.stringify(curmenu) != JSON.stringify(menu[liIndex - 1])) { //如果删除的不是当前选中的tab
// window.sessionStorage.setItem("curmenu",JSON.stringify(curmenu));
curNav = JSON.stringify(curmenu);
} else {
if ($(this).parent("li").length > liIndex) {
window.sessionStorage.setItem("curmenu", curmenu);
curNav = curmenu;
} else {
window.sessionStorage.setItem("curmenu", JSON.stringify(menu[liIndex - 1]));
curNav = JSON.stringify(menu[liIndex - 1]);
}
}
menu.splice((liIndex - 1), 1);
window.sessionStorage.setItem("menu", JSON.stringify(menu));
element.tabDelete("bodyTab", $(this).parent("li").attr("lay-id")).init();
new Tab().tabMove();
})
var bodyTab = new Tab();
exports("bodyTab", function (option) {
return bodyTab.set(option);
});
})
所以需要发送请求返回视图
registry.addViewController("/main").setViewName("admin/page/main");
起初担心返回的是视图会跳到是新的admin/page/main页面去。
不过还好没出现那样的情况,于是点击左侧菜单,右侧Tab也会跟着变化。