如何动态调整IFrame的大小？

kikoBean 2004-07-31 03:52:17
我有若干IFrame在页面上。每个IFrame里面都没有页面，即：开始每个IFrame的scr='about:blank'，代码如下：
<iframe id="MyFrame" class="MyFrameClass" src="about:blank"></iframe>
首先我设置了样式表如下所示：
<style>
.MyFrameClass{
overflow:auto;
height:expression(Resize(this));
width:100%;
}
</style>
里面有一段js函数用来判断当前IFrame里面的页面产生滚动条时IFrame调整方式，代码如下：
function Resize(obj){
if(obj.src=='about:blank'){
obj.style.height = '500px';
}
else{
obj.style.height = obj.document.body.scrollHeight+10;
}
obj.style.width = '100%';
}
function LoadPage(obj2,obj1){
obj2.src = obj1;
Resize(obj2);
}
现在问题是：
我要动态改变IFrame里的src，写有如下代码：
<input type="Button" value="Change SRC" onClick="LoadPage(document.getElementById('POFrame'),'iniframe.html')">
现在的结果是：
点击一下按钮框架变长了一些，再点又长了一些，...这样无止境的变长，直到没有滚动条，但是那时它还在长长。
我的目的是点击以后完整显示页面内容不要出现滚动条，如果src为空则显示一个固定的大小就可以了。高手帮忙！
...全文
577 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
黑马 2004-07-31
  • 打赏
  • 举报
 回复
<iframe name="test" src="a.jsp" width=100% Frameborder=No Border=0 Marginwidth=0 Marginheight=0 Scrolling=No onload='var f=document.all["test"]; var b=f.Document.body; f.height=b.scrollHeight'></iframe>

起作用的是：onload='var f=document.all["test"]; var b=f.Document.body; f.height=b.scrollHeight'
kikoBean 2004-07-31
  • 打赏
  • 举报
 回复
up
cuike519 2004-07-31
  • 打赏
  • 举报
 回复
完整的测试页面可以调整大小页面：
<HTML>
<HEAD>
<SCRIPT LANGUAGE=javascript>
<!--
function reSize(obj)
{
try{
var oBody = ifrm.document.body;
var oFrame = obj;
if(oFrame.src=='about:blank'){
oFrame.style.height = '500px';
}
else{
//alert(oBody.style.scrollHeight);
var realHeight = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight);
//alert(realHeight);
if(oBody.scrollHeight >=500){
oFrame.style.height = realHeight;
//alert(oFrame.style.height);
}
else{
oFrame.style.height = '500px';
}
}
oFrame.style.width = '100%';
}
catch(e){
window.status = 'Error: ' + e.number + '; ' + e.description;
}
}
function LoadPage(obj,obj1){
obj.src = obj1;
//setTimeout("reSize(obj)",100);
}
//-->
</SCRIPT>
<style>
.ab{
aaa:expression(reSize(this));
}
</style>
</HEAD>
<BODY>
dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>
dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>
dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>
dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>dafsdfas<p>
<iframe onresize=reSize(this) id=ifrm src='about:blank' class="ab"></iframe>
<input type="button" value="Resize" onClick="reSize(document.getElementById('ifrm'))">
<input type="button" value="LoadBigPage" onClick="LoadPage(document.getElementById('ifrm'),'iniframe.html')">
<input type="button" value="LoadSmallPage" onClick="LoadPage(document.getElementById('ifrm'),'Untitled-y.htm')">

</BODY>
</HTML>
cuike519 2004-07-31
  • 打赏
  • 举报
 回复
<HTML>
<HEAD>
<SCRIPT LANGUAGE=javascript>
<!--
function reSize(obj)
{
try{
var oBody = ifrm.document.body;
var oFrame = obj;
if(oFrame.src=='about:blank'){
oFrame.style.height = '500px';
}
else{
oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight);
}
oFrame.style.width = '100%';
}
catch(e){
window.status = 'Error: ' + e.number + '; ' + e.description;
}
}
function LoadPage(obj,obj1){
obj.src = obj1;
reSize(obj);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<iframe onresize=reSize(this) id=ifrm src='about:blank'></iframe>
<input type="button" value="Resize" onClick="reSize(document.getElementById('ifrm'))">
<input type="button" value="LoadPage" onClick="LoadPage(document.getElementById('ifrm'),'iniframe.html')">
</BODY>
</HTML>
cuike519 2004-07-31
  • 打赏
  • 举报
 回复
http://support.microsoft.com/default.aspx?scid=http://support.microsoft.com:80/support/kb/articles/q278/4/69.asp&NoWebContent=1
iframe自适应宽高
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域认证。 提供了一系列的页面大小的计算方法来支持复杂的CSS布局。 检测修改DOM可以使网页大小使用MutationObserver。 发现可以导致页面大小调整事件（窗口大小调整，CSS动画和过渡，改变方向和鼠标事件）。 简化通讯和主机之间通过PostMessage iframe的网页。 在iframe页面链接修复和支持iFrame与父页面之间的链接。 提供自定义的大小和滚动方法。 使家长地位和视口大小的iframe。 与ViewerJS支持PDF和ODF文档。 后备支持到IE8。
iframe-resize:一个非常粗略的jQuery插件，可用于调整iframe的大小
iframe调整大小 一个简单的实用程序，可将iframe调整为其内容的大小。 用法 $('iframe').iframeResize(); 这会将加载事件处理程序绑定到每个iframe，并将它们调整为当前内容的大小。 它还为自定义sizeToContent事件注册了一个处理程序，该事件可以使用以下方法从iframe中触发： window.parent.$(window.frameElement).trigger("sizeToContent"); iframeResize-min-height可用于为iframe设置默认高度，并在加载内容时自动将其删除。
iframe-resizer：在页面链接，嵌套和多个iFrame中，支持大小相同的跨域iFrame，并支持窗口内容大小调整
iFrame Resizer V4 通过该库，可以自动调整相同和跨域iFrame的高度和宽度的大小，以适合其包含的内容。 它提供了一系列功能来解决使用iFrame时最常见的问题，其中包括： 将iFrame调整为内容大小的高度和宽度。 适用于多个和嵌套的iFrame。 跨域iFrame的域身份验证。 提供多种页面大小计算方法，以支持复杂CSS布局。 检测对DOM的更改，该更改可能导致使用调整页面的大小。 检测可能导致页面调整大小的事件（“窗口调整大小”，“ CSS动画和过渡”，“方向改变”和“鼠标”事件）。 通过在iFrame和主机页面之间简化了消息传递。 修复了iFrame中
iframe自适应大小.docx
不带边框的iframe因为能和网页无缝的结合从而使在不刷新页面的情况下只更新页面的部分数据成为可能。但中iframe的大小却不能像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行。现在来描述一种iframe 动态调整高度的方法...
iframeless:自动调整 iframe 的大小以匹配其内容的高度并且根本没有滚动条
无框架 自动调整 iframe 的大小以匹配其内容的高度并且根本没有滚动条。 演示 跨浏览器测试 自动调整大小的代码 var iframe = document.querySelector('iframe'); iframe.onload = function() { iframe.height = Math.max( iframe.contentDocument.body.scrollHeight || 0, iframe.contentDocument.body.offsetHeight || 0, iframe.contentDocument.clientHeight || 0, iframe.contentDocument.scrollHeight || 0, iframe.contentDocument.offsetHeight
JavaScript

87,922

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章