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

StackOverflow https://stackoverflow.com/questions/58543

  •  09-06-2019
  •  | 
  •  

题

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

简单的：刚刚设置 height 和 width 到 100%！除此之外，它不起作用。

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

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

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

  • 公司 CMS 显示我们整个网站的内容
  • 大多数页面通过 CMS 创建
  • 我的应用程序不是，但他们会让我将其嵌入到 <iframe>
  • 我无法控制 iframe, ，因此任何解决方案都必须从引用的页面开始工作（根据 src 的属性 iframe 标签）
  • CMS 显示页脚，因此将高度设置为 100 万像素并不是一个好主意

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

这项技术似乎有效（收集到的 来自多个来源，但受到启发 关联 从接受的答案：

在父文档中：

<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 的限制，只有当父级和子级位于同一域时，这才有效......

有帮助吗？

解决方案

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

其他提示

如果您的 iframe 与包含页面托管在同一台服务器上，您可以 通过 JavaScript 访问它.

有许多建议的方法 将 iframe 设置为内容的完整高度, ，每个都取得了不同程度的成功 - 谷歌搜索这个问题表明这是一个相当常见的问题，恐怕没有真正的、一刀切的共识解决方案！

有不少人举报称 这个脚本 可以解决这个问题，但可能需要 一些修改 针对您的具体情况（再次假设您的 iframe 和父页面位于同一域中）。

我可能在这里遗漏了一些东西，但添加 scrolling=no 作为属性 iframe 标签通常会摆脱滚动条。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top