iframe自动根据内容调整大小

来源：互联网发布：嵌入式linux内核裁剪编辑：程序博客网时间：2024/04/30 14:30

出处：http://blog.163.com/xx_jun_/blog/static/20827520920125169374412

最近做网页开发，用到了iframe，其实以前也用这个，不过由于它不能自动根据内容调整大小，所以用的很少，也就没有仔细研究，可是最近做网页开发其中几个页面必须要用到iframe才能很容易的进行一些操作，不得以就研究了一下，如何让其自动根据内容来设定自身的大小

研究的第一步，肯定是上网查了，到google,baidu了一下，确实有这方面的资料，其中讲的最多的就是用以下的代码实现iframe的大小自适应的调整：

针对以上的代码，本人亲自测试了一下，确实没有问题，能让iframe在不出现滚动条的情况下，显示页面的全部信息，可是这种方法有一个很大的弊端，确切点说他只能变大，不能变小，比如我在A.jsp中有一个iframe，然后我点击访问B.jsp，之后再点击访问C.jsp，如果B.jsp比C.jsp的高度高的话，那么访问C页面的时候也会按照B页面的高度来显示，也就是说他不能自动变小，当然这是不正常的现象，实际上C.jsp应该按照自己的高度来显示的，另一方面如果B的高度比C小的话，那C的显示就正常了，页面会自动变高。

虽然使用以上的方法，能够让iframe不出现的滚动条的情况下，显示全部的内容，可是它所带来的弊端也是不能忍的，比如说我先前访问一个页面可能有2000的滚动高度，然后我下一个访问的页面只有200的高度有实际内容，可是它还会按2000的高度来显示，让用户操作起来，感觉有点怪怪的

针对这种问题，笔者经过大量的实验终于找到了一个可行的办法，为了说明这个办法的使用，我新建了2个页面，这做测试，页面一名为：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">

<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

<!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">

  <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必不可少

A.jsp中要求用户输入一个数字，然后在B.jsp中根据用户输入的数字输出相应数目的换行来占位，使用页面的高度发生变化。

可以发现iframe的高度变化自如，并不会出现最开始说的，不能变小的情况了

当然这种方法可以用在多级iframe中，但是注意，一定要在最内层的页面的最后中加入以下的js代码

在最内层内面的<head>标签对内加入以下的代码

将最内层页面的所有内容包含在一个div标签对中

中间每一级的页面的<head>标签对中加入以下的代码

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>标签对中加入以下的代码

注意，标紫色的部分，在每个页面中应该不一样，要不然在多级嵌套iframe中，页面可能不知道在哪个iframe中显示，所以一定要保证各个iframe的名字是不一样的，至于ID看个人爱好，设为一样，也没有问题的

0 0