页面一名为：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看个人爱好，设为一样，也没有问题的