【layui】tabs 控件内通过 iframe 加载url 方式渲染tab页面

放学后的泡泡2024-12-07 11:00
html 复制代码 
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>tabs 内部使用 iframe 嵌套 url 页面</title>
	<link rel="stylesheet" href="../../../libs/layui/layui-2.4.5/dist/css/layui.css">
	<script src="../../../libs//layui/layui-2.4.5/dist/layui.js"></script>
	<style>
		/**
		 * iframe 自适应方案
		 */
		.layui-tab-content .layui-show {
			position: fixed;
			width: 100%;
			height: 90%;
			top: 10%;
			left: 0;
		}
	</style>
</head>

<body>


	<div class="layui-fluid weadmin-body">

		<div class="layui-tab layui-tab-brief" lay-filter="tabs">
			<ul class="layui-tab-title">
				<li class="layui-this" lay-id="0">明细</li>
				<li lay-id="1">汇总</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show" style="">
					<iframe id="iframe_jylc_0" frameborder="0" src="./1.html" scrolling="yes" class="weIframe"
						style="width: 100%;height: 100%;">
					</iframe>
				</div>
				<div class="layui-tab-item ">
					<iframe id="iframe_jylc_1" frameborder="0" src="./2.html" scrolling="yes" class="weIframe"
						style="width: 100%;height: 100%;">
					</iframe>
				</div>
			</div>
		</div>
	</div>
	<script>
		layui.use(['jquery', 'layer', 'form', 'table', 'laydate', 'util', 'upload', 'element'],
			function () {
				var Hussar = layui.Hussar;
				var $ = layui.jquery;
				var layer = layui.layer;
				var form = layui.form;
				var laydate = layui.laydate;
				var $ax = layui.HussarAjax;
				var element = layui.element;
				var table = layui.table;
				var util = layui.util;
				var layerWindow;
				var upload = layui.upload;


				//tabs 点击事件触发
				element.on('tab(tabs)', function (data) {
				    // console.log(data);
				    // console.log($(this)); //当前Tab标题所在的原始DOM元素
				    console.log(data.index); //得到当前Tab的所在下标
				    // console.log(data.elem); //得到当前的Tab大容器
				    // $(data)
				    // console.log($("#iframe_jylc_"+data.index))
				
				});


			})
			;
	</script>
</body>

</html>

内部的 1.html

html 复制代码 
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>tab1</title>

	<style>
	
	</style>
</head>

<body>
    <div style="width: 100%;height: 100%;border:1px solid green;">
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
        <span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span>
    </div>

	

</body>

</html>

2.html:

html 复制代码 
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>tab2</title>
</head>

<body>

    <div style="width: 100%;height: 100%;border:1px solid blue;">
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
        <div>hello,world!222</div>
    </div>
	

</body>

</html>

效果图：

相关推荐
「、皓子~3 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了5 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_7 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术22 分钟前
京东小程序JS API仓颉改造实践
前端
奋飛31 分钟前
TypeScript系列：第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟32 分钟前
从小白入门，基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游35 分钟前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte40 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock（主题时钟）
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化？CommonJS 和 ES6 Modules 到底有什么区别？小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor1 小时前
AOP魔法：一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
热门推荐
01Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面02如何将markdown生成pdf03Coze扣子平台完整体验和实践（附国内和国际版对比）04Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案05手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07GPU 进阶笔记（二）：华为昇腾 910B GPU08鸽了六年的某大厂面试题：你会手写一个模板引擎吗？09DeepSeek各版本说明与优缺点分析10扣子空间的使用教程与大模型技术思考