当前位置：文江博客话题详情

自动调整 IFrame 大小

发布于 2024-09-24 23:45:10 字数 188 浏览 5 评论 0原文

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

太感谢了！

*编辑经过更多研究后，我发现了很多例子，声称（我没有测试过它们）可以做我需要的事情，但只有在页面刷新之后。这是我做不到的。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野の 2024-10-01 23:45:10

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

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

回复收藏 0 原文

岁月无声 2024-10-01 23:45:10

我认为您可以自动调整 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 包裹在一个 div 中，id ===“app-runner”。 iframe 的高度应为 100%。这样，不需要滚动条，应用程序只需每 500 毫秒自动调整大小（更好更快的结果 = 需要更多的处理器时间）

I think you can auto resize your iframe without an iframes on load event or any of that. But i only tested in ie7 + and it works in 3.6+ firefox and chrome.

Here is what i came up with.

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

Obviously there are better choices for better performance. But this is what i came up with. The html is simple. Just ahve an iframe wrapped in a div with id === "app-runner". The iframe should have height = 100%. This way, no scroll bars are needed, app just auto resizes on every 500ms (better and quicker results = more processor time required)

回复收藏 0 原文

~没有更多了~