LayUI可关闭Tab选项卡嵌套iframe实例（解决可关闭的Tab关闭按钮隐藏、页面不会重复开启、tab嵌套iframe页面显示不全问题）

效果示例

1.HTML页面代码片段

<div class="layui-side layui-bg-black">
	<div class="layui-side-scroll">
		<ul class="layui-nav layui-nav-tree"  lay-filter="left_nav">
			<li class="layui-nav-item layui-nav-itemed">
				<a class="" href="javascript:;">设备管理a>
				<dl class="layui-nav-child">
					
					<dd><a href="javascript:;" lay-id="tblDevice">设备列表a>dd>  
				dl>
			li>
		ul>
	div>
div>

<div class="layui-body" style="bottom:0px">
	<div style="height:100%; background-color:#DCDCDC">
		
		<div class="layui-tab" lay-allowClose="true" lay-filter="pageTab" style="background-color:#DCDCDC">
			<ul class="layui-tab-title" style="background-color:white">
				
				<li class="layui-this" lay-id="home"><i class="layui-icon layui-icon-home">i>首页li>
			ul>
			<div class="layui-tab-content" style="margin-top:15px;margin-bottom:5px;height: 100%;overflow-y: hidden; background-color:white">
				
				<div class="layui-tab-item layui-show" lay-allowClose="false">这里是首页的内容div>
			div>
		div>
	div>
div>

2.js代码部分

<!-- Jquery Js -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Layui Js -->
<script th:src="js/layui/layui.js"></script>
<!-- TabChange Js tab切换不重复相关js -->
<script type="text/javascript" src="js/tabChange.js"></script>
<script>
layui.use('element', function(){
	var element = layui.element;
	FrameWH();
	//【※不可删除的固定首页————tab去掉×号】
	$(".layui-tab ul").children('li').first().children('.layui-tab-close').css("display",'none');
	//【※※页面不会重复开启】
	var arry = new TabList;
	//【※※arry.add将首页的lay-id添加进数组（如果tab栏没有固定首页忽略这条）】
	arry.add('home');
  	//左侧导航栏（nav监听事件）
	element.on('nav(left_nav)',function(data){
		//此处判定是否是二级导航栏，二级导航栏的lay-id为请求的url片段，为空则为一级导航栏
		//【※※arry.find判断Tab的lay-id是否存在】
		if(this.getAttribute('lay-id') != null && arry.find(this.getAttribute('lay-id'))){
			//点击添加Tab选项卡
			element.tabAdd('pageTab',{
		  		title:data.context.innerText,
		  		//此处动态嵌入iframe
		  		content:'',
	  			id: this.getAttribute('lay-id')
			});
			//【※※arry.add将Tab的lay-id添加进数组】
			arry.add(this.getAttribute('lay-id'));
		}
		element.tabChange('pageTab', this.getAttribute('lay-id'));
		//【※※※Tab页面显示不全】
		FrameWH();
	});
	//可删除的Tab选项卡(点击事件)
	element.on('tabDelete(pageTab)', function(elem){
		//【※※arry.remove关闭页面时将数据移除】
		arry.remove(elem.elem.context.parentElement.getAttribute('lay-id'));
	});
	
});
</script>

3.FrameWH

//【※※iframe页面显示不全函数FrameWH】
function FrameWH() {
	var height = $(window).height()-20;
	$(".layui-tab-content").css("height",height+"px");
	$("iframe").css("height",height+"px");
}

4.tabChange.js相关

function TabList(){
	var list = new Array();
	this.add = function(name){
		list.push(name);
	}
	this.remove = function(name){
		for(i = 0 ; i < list.length ; i++){
			if(name == list[i]){
				list.splice(i,1);
			}
		}
	}
	this.find = function(name){
		for(i = 0 ; i < list.length ; i++){
			if(name == list[i]){
				return false;
			}
		}
		return true;
	}
}