<iframe> - 如何显示引用页面的整个高度?</iframe>

时间:2008-09-12 09:18:11

标签: html iframe

我有一个应用程序,我想嵌入我们的公司CMS。 (我被告知)这样做的唯一方法是将其加载到<iframe>

简单:只需将heightwidth设置为100%!除外,它不起作用。

我确实知道如何将frameborder设置为0,因此至少看起来就像网站的一部分一样,但我不希望有一个丑陋的滚动条里面一个已经有一个的页面。

你知道有什么技巧吗?

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

  • 公司CMS显示我们整个网站的绒毛和东西
  • 通过CMS创建的大多数页面
  • 我的申请不是,但他们会让我把它嵌入<iframe>
  • 我无法控制iframe,因此任何解决方案都必须在引用的页面中工作(根据src标记的iframe属性)
  • 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>

BTW:这只有在父和子因为安全原因限制JavaScript而在同一个域中时才有效...

3 个答案:

答案 0 :(得分:3)

您可以使用脚本语言将页面包含到父页面中,否则,您可能想尝试使用以下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

答案 1 :(得分:2)

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

setting the iframe to the full height of the contents有许多建议的方法,每种方法都有不同程度的成功 - 谷歌针对这个问题表明这是一个非常普遍的方法,没有真正的,一刀切的共识解决方案我很害怕!

有些人报告this script可以解决问题,但针对您的具体情况可能需要some modification(同样,假设您的iframe和父网页位于同一个域中)。

答案 2 :(得分:0)

我可能在这里遗漏了一些内容,但将scrolling=no作为属性添加到iframe标记通常会删除滚动条。