`
445822357
  • 浏览: 736605 次
文章分类
社区版块
存档分类
最新评论

JS动态改变iframe的高度

 
阅读更多

在数飞OA的开发过程中,遇到问题:一个jsp页面嵌套一个html页面。

〈iframe id="docDetail" width="100%" height="200"
frameborder="0"
src="a.htm"〉
〈/iframe〉

而a.html不是固定大小的,这个时候嵌套的iframe就会出现滚动条。

通过js获取iframe的高度,然后动态的改变,这样就不会出现滚动条。

方式一:在jsp的body里增加onload方法

〈body onload="javascript:ResizeFrame();"〉

function ResizeFrame() {
var oFrame = document.getElementById("docDetail");
var vHeight= document.frames("docDetail").document.body.scrollHeight;
oFrame.height = vHeight;
}

通过document.frames("docDetail")可以获得确实的高度
通过document.getElementById("docDetail")可以改变frame的高度。

方式二:在html的body里增加onload方法:
〈body onLoad="javascript:ReSize();"〉

function ReSize() {
//自动调节窗口的大小
var vHeight = document.body.scrollHeight + 30;
window.resizeTo(650, vHeight);
}


******************************************************

获取父页面iframe的高度时需要注意的:

var _head = window.parent.parent.document.getElementById("mainIframe").height;

var _head = window.parent.parent.document.frames("mainIframe").height;

使用上面方式可以获取到准确的高度;

******************************************************

var _head = window.parent.parent.frames("mainIframe").height;

使用上面的方式无法获取到高度;

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics