无法控制 iframe 高度答案

【问题标题】：Can not control iframe height无法控制 iframe 高度
【发布时间】：2012-08-08 16:50:27
【问题描述】：

我在 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>

但它不能显示里面的所有内容。我通过firebug检查了元素，然后发现：

    <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;

有什么问题？

【问题讨论】：

标签： css iframe height

【解决方案1】：

对于嵌入了iframe 的HTML 文档，您的JavaScript 代码只需将iframe 元素的height 属性值加30。这解释了值 930。与此处的目标相反，您获得的 scrollHeight 值只是内联框架元素的高度，而不是嵌入文档的固有高度要求。

对于非 HTML 类型的嵌入文档，可能会发生奇怪的事情。例如，如果它是一个纯文本文件，scrollHeight 值可能反映了内在的高度要求，从其中的行数得出。在不知道请求 ./modules/ophthalmology/patients.php 时服务器返回什么的情况下，我只能猜测它不是 HTML。

【讨论】：

我解决了这个问题。这是由错误的js代码引起的。我删除了，没关系。