自动调整 IFrame答案

【问题标题】：Auto-resize IFrame自动调整 IFrame
【发布时间】：2010-09-27 18:00:54
【问题描述】：

我真的需要有人帮忙> 我在一个 IFrame 中有一个小图像，点击它后会显示另一个图像并向下滑动一点。如何使 IFrame 根据其内容自动变大或变小？

非常感谢！

*编辑在对此进行了更多研究之后，我发现了很多声称（我没有测试过它们）可以满足我需要的示例，但仅在页面刷新之后。这是我做不到的。

【问题讨论】：

为了轻松（或可靠地）执行此操作，您的父页面和 iframed 页面需要位于同一域中。您能否确认是否是这种情况，以便我们知道如何回答？
我可以确认，不幸的是，不，事实并非如此。 IFrame 并非都托管在同一个域中。
嗯。是的，我认为没有任何安全的解决方案。我发现的所有解决方案似乎都构成重大安全威胁。我认为是时候结束这个问题了 - 打开它没有任何意义。

标签： javascript html css iframe resize

【解决方案1】：

您可以使用JavaScript 方法更改 iFrame 的大小。然后将该方法与 iFrame 的 OnLoad 事件相关联。

没有必要重新编写代码，因为它很短，而且在上面的链接中很重要。有人说它在 Opera 中不起作用，但请尝试一下，看看它是否适合您的需求。

【讨论】：

是的，很抱歉弗朗索瓦，上面链接中的代码确实不起作用。谢谢你的尝试。 :)
好的，在阅读了有关 IFrame 的更多信息并在网上搜索了几周后，我能够在这里和那里找到一些东西，并将其应用于链接中演示的代码示例你提供的。那谢谢啦！ :D

【解决方案2】：

我认为您可以自动调整 iframe 的大小，而无需 iframe 加载事件或任何其他事件。但我只在 ie7 + 中测试过，它适用于 3.6+ firefox 和 chrome。

这是我想出的。

var $app = $(window[options.name]),
            $appContainer = $("#app-runner");

        window.setInterval(function() {
            var frameEl = $app[0].frameElement,
                frameDoc = 0,
                height = 0;

            if (frameEl.contentDocument !== undefined) {
                frameDoc = frameEl.contentDocument,
                height = frameDoc.height || frameDoc.body.offsetHeight;
            } else if (frameEl.document !== undefined && frameEl.document.documentElement !== undefined) {
                frameDoc = frameEl.document.documentElement,
                height = frameDoc.offsetHeight;
            }
            $appContainer.css("height", height);
        }, 500);

显然有更好的选择以获得更好的性能。但这就是我想出的。 html很简单。只需将 iframe 包裹在 id === "app-runner" 的 div 中即可。 iframe 的高度应为 100%。这样，不需要滚动条，应用程序每 500 毫秒自动调整大小（更好更快的结果 = 需要更多的处理器时间）

【讨论】：

它需要 jQuery，对吧？使用jQuery v1.8.3，出现错误：Uncaught ReferenceError: options is not defined。文档准备好后加载脚本