iframe 自适应高度解决

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;//给与一个界限
				}
			}
		}

猜你喜欢

转载自blog.csdn.net/q6658368/article/details/81054427