页面一名为：A.jsp,页面二名为B.jsp,
A.jsp中要求用户输入一个数字，然后在B.jsp中根据用户输入的数字输出相应数目的换行来占位，使用页面的高度发生变化。
页面的内容分别如下：
A.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>A</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
function resizeIframe(iWidth,iHeight){
var mainIframeObj = document.getElementByIdx_x_x("mainIframeId");
mainIframeObj.style.height = iHeight+"px";
//mainIframeObj.style.width = iWidth+"px";
}
</script>
</head>
<body>
<form method="post" action="B.jsp" style="width:100%;text-align: left;padding: 0;margin: 0;" target="mainIframe">
<input name="testTest"/>
</form>
<iframe id="mainIframeId" name="mainIframe"></iframe>
</body>
</html>
B.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>B</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
function resizeparentFrame()
{
var topDivObj = document.getElementByIdx_x_x("topDiv");
//alert(topDivObj.scrollHeight+"--"+topDivObj.clientHeight+"--"+topDivObj.style.height);
var hh = document.body.scrollHeight+50;
hh = topDivObj.scrollHeight + 50;
alert(hh);
var ww = document.body.scrollWidth+80;
window.parent.resizeIframe(ww,hh);
}
</script>
</head>
<body>
<div id="topDiv">
<%
String i = request.getParameter("testTest");
int t = Integer.parseInt(i);
for(int j = 0;j < t;j++)
{
out.print("TEST<br/>");
}
%>
</div>
<script type="text/javascript">
resizeparentFrame();
</script>
</body>
</html>
注意以上标红色的部分是关键，其中 B.jsp中的那个顶层DIV必不可少
当然这种方法可以用在多级iframe中，但是注意，一定要在最内层的页面的最后中加入以下的js代码
<script type="text/javascript">
resizeparentFrame();
</script>
在最内层内面的<head>标签对内加入以下的代码
<script type="text/javascript">
function resizeparentFrame()
{
var topDivObj = document.getElementByIdx_x_x("topDiv");
//alert(topDivObj.scrollHeight+"--"+topDivObj.clientHeight+"--"+topDivObj.style.height);
var hh = document.body.scrollHeight+50;
hh = topDivObj.scrollHeight + 50;
alert(hh);
var ww = document.body.scrollWidth+80;
window.parent.resizeparentFrame(ww,hh);
}
</script>
将最内层页面的所有内容包含在一个div标签对中
中间每一级的页面的<head>标签对中加入以下的代码
<script type="text/javascript">
function resizeparentFrame(iWidth,iHeight){
var appSubIframeObj = document.getElementByIdx_x_x("appSubIframeId");
appSubIframeObj.style.height=iHeight+"px";
//appSubIframeObj.style.witdh=iWidth+"px";
//alert(iWidth);
//var hh = document.body.scrollHeight;
//var ww = document.body.scrollWidth;
//if(hh < 200)
// hh = 200;
window.parent.resizeIframe(800,iHeight);
}
</script>
最顶层的页面<head>标签对中加入以下的代码
<script type="text/javascript">
function resizeIframe(iWidth,iHeight){
var mainIframeObj = document.getElementByIdx_x_x("mainIframeId");
mainIframeObj.style.height = iHeight+"px";
//mainIframeObj.style.width = iWidth+"px";
}
</script>
注意，标紫色的部分，在每个页面中应该不一样，要不然在多级嵌套iframe中，页面可能不知道在哪个iframe中显示，所以一定要保证各个iframe的名字是不一样的，至于ID看个人爱好，设为一样，也没有问题的