<iframe> - 如何显示引用页面的整个高度？答案

【问题标题】：<iframe> - How to show the whole height of referenced page?<iframe> - 如何显示引用页面的整个高度？
【发布时间】：2010-09-08 16:22:57
【问题描述】：

我有一个应用程序想嵌入到我们公司的 CMS 中。这样做的唯一方法（有人告诉我）是将其加载到 <iframe> 中。

简单：只需将height 和width 设置为100%！除了，它不起作用。

我确实发现了将frameborder 设置为0，所以它至少看起来 像网站的一部分，但我不希望里面有丑陋的滚动条一个已经有的页面。

你知道有什么技巧可以做到这一点吗？

编辑：我想我需要稍微澄清一下我的问题：

公司 CMS 显示我们整个网站的绒毛和东西
通过 CMS 创建的大多数页面
我的应用程序不是，但他们会让我将其嵌入到<iframe>
我无法控制iframe，因此任何解决方案都必须在引用的页面上运行（根据iframe 标记的src 属性）
CMS 显示页脚，因此将高度设置为 100 万像素不是一个好主意

我可以从引用的页面访问父页面 DOM 吗？这可能会有所帮助，但我可以看到有些人可能不希望这成为可能......

这种技术似乎有效（gleaned 来自多个来源，但受到公认答案中的link 的启发：

在父文档中：

<iframe id="MyIFRAME" name="MyIFRAME" 
    src="http://localhost/child.html"
    scrolling="auto" width="100%" frameborder="0">
    no iframes supported...
</iframe>

在孩子中：

<!-- ... -->
<body>
<script type="text/javascript">
    function resizeIframe() {

        var docHeight;
        if (typeof document.height != 'undefined') {
            docHeight = document.height;
        }
        else if (document.compatMode && document.compatMode != 'BackCompat') {
            docHeight = document.documentElement.scrollHeight;
        }
        else if (document.body 
            && typeof document.body.scrollHeight != 'undefined') {
            docHeight = document.body.scrollHeight;
        }

        // magic number: suppress generation of scrollbars...
        docHeight += 20;

        parent.document.getElementById('MyIFRAME').style.height = docHeight + "px";    
    }
    parent.document.getElementById('MyIFRAME').onload = resizeIframe;
    parent.window.onresize = resizeIframe;
</script>               
</body>

顺便说一句：这只有在父子节点在同一个域中时才有效，因为 JavaScript 出于安全原因的限制...

【问题讨论】：

标签： html iframe

【解决方案1】：

您可以只使用脚本语言将页面包含到父页面中，否则，您可能想尝试以下 javascript 方法之一：

http://brondsema.net/blog/index.php/2007/06/06/100_height_iframe http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_22840093.html

【讨论】：

【解决方案2】：

如果您的 iframe 与包含页面托管在同一台服务器上，您可以access it via javascript。

对于setting the iframe to the full height of the contents，有许多建议的方法，每种方法都取得了不同程度的成功 - 对此问题的谷歌表明这是一个很常见的方法，没有真正的、一刀切的共识解决方案我'我害怕！

有几个人报告说this script 可以解决问题，但您的具体情况可能需要some modification（同样，假设您的 iframe 和父页面位于同一域中）。

【讨论】：

【解决方案3】：

我可能在这里遗漏了一些东西，但是将scrolling=no 作为属性添加到iframe 标记通常会消除滚动条。

【讨论】：

是的，但是如果嵌入的页面不适合 iframe，则会被切断。