iframe自适应高度

最新推荐文章于 2021-03-10 18:45:00 发布

yaerfeng

最新推荐文章于 2021-03-10 18:45:00 发布

阅读量2k

点赞数 1

分类专栏： XML/JSON/Html/CSS

本文链接：https://blog.csdn.net/yaerfeng/article/details/8137753

版权

XML/JSON/Html/CSS 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

iframe自适应高度问题。头疼。

上网找了下，好像没有找到十分兼容各种浏览器的东东。

写个初级版的先用着吧。就几行代码。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/WEB-INF/struts-tags.tld"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<base href="<%=basePath%>">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<link rel="stylesheet" href="/css/css.css" type="text/css" />
		<style type="text/css">
</style>
		<script type="text/javascript">
	function $$(obj){
		return document.getElementById(obj);
	}
	//浏览器高度自适应
	function SetCwinHeight(iframeObj){
		var minHeight=400;//如果超过最小高度则自动变高
	  if (document.getElementById){ 
		   if (iframeObj && !window.opera){ 
			    if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){
			    	iframeObj.height=0; //必须将其高度初始化为0，否则下面的h永远都是第一次变高后的高度
			    	var h=iframeObj.contentDocument.body.offsetHeight;
			     	if(h<minHeight){
			     		h=minHeight;
			     	}
			     	iframeObj.height = h+'px';
			     	$$('leftiframe').height = h+'px';
			    }else if(document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){
			    	iframeObj.height=0;
			    	var h=document.frames[iframeObj.name].document.body.scrollHeight;
			    	if(h<minHeight){
			     		h=minHeight;
			     	}
				     iframeObj.height = h+'px';
				     $$('leftiframe').height =h+'px';
			    } 
		   } 
	  }
	} 
	function init(){
		var main_width=$$('mainmenu').style.width;
		var left_width=$$('leftmenu').style.width;
		var h=$$('rightmenu').style.height;
		//$$('mainmenu').style.height=h+'px'; IE中不可执行。
		$$('rightmenu').style.width =parseInt(main_width)-parseInt(left_width)-5+'px';
	}
</script>
	</head>
	<body bgcolor="#E0E0E0" οnlοad="init();">
		<div class="container">
			<div id="topmenu">
				<IFRAME NAME="topm" width="100%" height="217px" frameborder="0" marginwidth="0" marginheight="0" SRC="/public/head.html" scrolling=no allowTransparency="true"></IFRAME>
			</div>
			<div id="mainmenu" style="width: 1000px; text-align: center;">
				<div id="leftmenu" style="float: left; width: 175px;">
					<IFRAME NAME="leftm" id="leftiframe" width=100% height=100% frameborder=0 marginwidth=0 marginheight=0 SRC="/register/pub/left.jsp" scrolling=no
						allowTransparency="true"></IFRAME>
				</div>
				<div id="rightmenu" style="float: left; width: 500px; height: 400px;">
					<IFRAME οnlοad="SetCwinHeight(this);" NAME="rightm" id="rightfm" width=100% height=100% frameborder=0 marginwidth=0 marginheight=0
						SRC="/register/selfinfo.jsp" scrolling=no allowTransparency="true" align=center></IFRAME>
				</div>
				<div style="clear: both;"></div>
			</div>
			<div id="bottommenu">
				<IFRAME NAME="bottomm" width=1002  frameborder=0 marginwidth=0 marginheight=0 SRC="/public/bottom.html" scrolling=no
					allowTransparency="true" align=center></IFRAME>
			</div>
		</div>
	</body>
</html>

//窗体加载时获取左侧iframe的宽度，浏览器宽度-左侧=自动判断右侧rightframe的宽度，避免写死。

点击左侧菜单，相应打开右侧页面，由于右侧页面高度不一，且可能影响左侧导航丑陋，故而做了下判断。写在上面的js的SetCwinHeight方法中。

右侧导航随内容高度变化而变化，左侧导航则至少维持400的高度，避免右侧过短影响左侧显示。

注意下面这2句：如果少了上面这句，变高后的页面不会自动变小的。

iframeObj.height=0; //必须将其高度初始化为0，否则下面的h永远都是第一次变高后的高度
var h=iframeObj.contentDocument.body.offsetHeight;

yaerfeng

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
iframe自适应高度

iframe自适应高度问题。头疼。上网找了下，好像没有找到十分兼容各种浏览器的东东。写个初级版的先用着吧。就几行代码。<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + reques
复制链接

扫一扫