出处:http://blog.163.com/xx_jun_/blog/static/20827520920125169374412
最近做网页开发,用到了iframe,其实以前也用这个,不过由于它不能自动根据内容调整大小,所以用的很少,也就没有仔细研究,可是最近做网页开发其中几个页面必须要用到iframe才能很容易的进行一些操作,不得以就研究了一下,如何让其自动根据内容来设定自身的大小
研究的第一步,肯定是上网查了,到google,baidu了一下,确实有这方面的资料,其中讲的最多的就是用以下的代码实现iframe的大小自适应的调整:
<iframe name="iframe1" width="100%" height="100%" οnlοad="this.height=iframe1.document.body.scrollHeight" frameborder="0"></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">
<!--
<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必不可少
A.jsp中要求用户输入一个数字,然后在B.jsp中根据用户输入的数字输出相应数目的换行来占位,使用页面的高度发生变化。
可以发现iframe的高度变化自如,并不会出现最开始说的,不能变小的情况了
当然这种方法可以用在多级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看个人爱好,设为一样,也没有问题的