2012-08-11 75 views
0

我遇到了iframe高度的问题。无法控制iframe高度

在它的父页面,我们设置它的高度= 900px,这样的:

<html lang="en-us"> 
    <head> 
     <?php include_once "./includes/header.php"; ?> 
    </head> 
    <body> 
     <?php include_once "./includes/top.php" ?> 
     <?php include_once "./includes/left_nav.php" ?> 
     <section id="content"> 
     <iframe width="100%" height="900" id="myFrame" src="./modules/ophthalmology/patients.php" scrolling="no" frameborder="0"> 
     </iframe> 
     </section> 
     <?php include_once "./includes/footer.php" ?> 
    </body> 
    </html> 

,但它不能显示它里面的所有内容。我查的萤火虫元素,然后发现:

<iframe id="myFrame" width="100%" scrolling="no" height="208" frameborder="0" src="./modules/ophthalmology/patients.php"> 

高度改为208

但在另一个模块,它的源代码:

<html lang="en-us"> 
    <head> 
     <?php include_once "./includes/header.php"; ?> 
    </head> 
    <body> 
     <?php include_once "./includes/top.php" ?> 
     <?php include_once "./includes/left_nav.php" ?> 
     <section id="content"> 
     <iframe width="100%" height="900" id="myFrame" src="./modules/csvfileupload/index.html" scrolling="no" frameborder="0"> 
     </iframe> 
     </section> 
     <?php include_once "./includes/footer.php" ?> 
    </body> 
    </html>    

将其改为:

<iframe id="myFrame" width="100%" scrolling="no" height="930" frameborder="0" src="./modules/csvfileupload/index.html"> 

这两个唯一的区别是src文件不同,首先是patients.php,第二个是index.html。所有其他人都一样。

我已经检查的内容元素,它的CSS:

#content { 
     border: 1px solid; 
     border-bottom-left-radius: 4px; 
     border-bottom-right-radius: 4px; 
     margin: 0; 
     min-height: 600px; 
     overflow: visible; 
     padding: 15px 5px 15px 230px; 
    } 

而且我还发现有在的header.php一个js函数:

function sizeFrame() { 
     var F = document.getElementById("myFrame"); 
     if(F.contentDocument) { 
      F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome 
     } else { 
      F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome 
     } 
    } 
    window.onload=sizeFrame; 

什么问题?

回答

0

对于嵌入iframe的HTML文档,您的JavaScript代码只需将0123添加到iframe元素的height属性的值中即可。这解释了值930.与此处的目标看起来相反,您获得的scrollHeight值仅仅是嵌入式文档的内嵌框架元素的高度,而不是嵌入式文档的固有高度要求。

对于非HTML类型的嵌入式文档,可能会发生奇怪的事情。例如,如果它是一个纯文本文件,那么scrollHeight值可能反映了内在高度要求,该要求源自其中的行数。当请求./modules/ophthalmology/patients.php时,如果不知道服务器返回的内容,我可以猜测它是非HTML的。

+0

我修复了这个问题。它是由错误的js代码引起的。我删除它,没关系。 – PhilipSong 2012-08-11 23:17:25