iframe 自适应高度解决

最新推荐文章于 2025-07-12 16:41:47 发布

叫我18岁的骚年

最新推荐文章于 2025-07-12 16:41:47 发布

阅读量1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：我的记录（前端）

本文链接：https://blog.youkuaiyun.com/q6658368/article/details/81054427

我的记录（前端）专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的交互式统计图表应用，通过动态加载不同统计页面并实时更新iframe内容，展示部门、栏目、上稿及图标统计，同时详细解释了如何设置iframe高度以适应不同内容长度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

	<body>

		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			<ul class="layui-tab-title">
				<li class="layui-this" data-value="/gcsoft/news/newsCountCharPage.action">图标统计</li>
				<li data-value="/gcsoft/news/countListPage.action">上稿统计</li>
				<li data-value="/gcsoft/news/newscountDeptListPage.action">部门上稿统计</li>
				<li data-value="/gcsoft/news/newscountMenutListPage.action">栏目上稿统计</li>
			</ul>
			<div><iframe id="iframe" name="iframe" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no" src="/gcsoft/news/newsCountCharPage.action" style="width:100%;magrin:0 auto"></iframe></div>
		</div>
	</body>

js：

 	   //点击刷新iframe
		layui.use(['element'], function() {});
		$(".layui-tab-title li").click(function() {
			var href = $(this).attr("data-value");
			$("#iframe").attr("src", href);
			$("#iframe").css("height", '');
			setIframeHeight();
			document.getElementById('iframe').src = href;
		});

         //设置iframe高度函数
		function setIframeHeight() {
			var iframe = document.getElementById('iframe');
			var height = window.parent.document.documentElement.scrollHeight - 165;//获取父页面高度减去差值
			if(document.all) { //判读ie w3c
				iframe.attachEvent("onload", function() { //ie 判断加载 
					var temph = iframe.contentWindow.document.documentElement.scrollHeight;
					iframe.height = temph > 400 ? temph : height;//给与一个界限
				});
			} else {
				var ifr = $("#ifr", parent.document);
				iframe.onload = function() { //w3c判断加载
					var temph = iframe.contentDocument.body.scrollHeight;
					iframe.height = temph > 400 ? temph : height;//给与一个界限
				}
			}
		}