iframe的动态调整高度 [英] iframe dynamic height resizing

问题描述

您好我现在有2页（index.html，然后iframe_contents.html）。两者都是同一个域。

Hi I currently have 2 pages (index.html and iframe_contents.html). Both are on the same domain.

我目前想获得的iframe基于内容的大小动态调整。

I am currently trying to get the iframe to dynamically resize based on the contents size.

我是用这个来帮助我的http：// benalman .COM / code /项目/ jQuery的调整大小/例子/调整/ 和它的作品，如果iframe_contents body标签沾到Firefox和IE 7/8/9或大或小但WebKit的它不仅能种植而且永远不能收缩

I was using this to assist me http://benalman.com/code/projects/jquery-resize/examples/resize/ and it works if the iframe_contents body tag gets larger or smaller on Firefox and IE 7/8/9 but for webkit it only can grow and can never shrink

我已经收窄至iframe_contents.html没有缩水的内容时高度的变化，但只有在iframe body标签。当iframe_contents.html不在的iframe，如果我缩小/放大元素体总高度的变化。

I've narrowed it down to the body tag in iframe_contents.html not shrinking when content height changes but only in the iframe. When iframe_contents.html is not in a iframe if I shrink / enlarge elements the bodies overall height changes.

这是一个WebKit的具体问题？

Is this a webkit specific issue?

推荐答案

阅读大量的答案后，在这里，他们都与在需要时调整不小了同样的问题。我想大多数人都只是在做一个一次性框架加载后调整，也许不在乎。我需要随时调整再次窗口大小的变化。所以对我来说，如果他们所做的窗口缩小的iframe会得到非常高的，那么当他们窗口变大就应该变短一次。这是不是在某些浏览器发生因为scrollHeight属性，clientHeight，jQuery的高度（）和其他任何高度，我可以使用DOM找到检查员（萤火虫/ Chrome开发工具）未报告的身体或html高度变短的iframe是后变宽。像人体有最小高度100％设置或东西。

After reading lots of answers here they all had the same issue with not resizing smaller when needed. I think most people are just doing a one-off resizing after the frame loads, so maybe don't care. I need to resize again anytime the window size changes. So for me, if they made the window narrow the iframe would get very tall, then when they make the window larger it should get shorter again. This wasn't happening on some browsers because the scrollHeight, clientHeight, jquery height() and any other height I could find with DOM inspectors (FireBug/Chrome Dev Tools) did not report the body or html height as being shorter after the iframe was made wider. Like the body had min-height 100% set or something.

有关我的解决办法是让iframe的高度为0，然后检查scrollHeight属性，然后设置为该值。为了避免在我的页面跳来跳去滚动条，我设置父（包含IFRAME）的iframe高度的高度，以保持固定的总页面大小，而这样做。

For me the solution was to make the iframe 0 height, then check the scrollHeight, then set to that value. To avoid the scrollbar on my page jumping around, I set the height of the parent (that contains the iframe) to the iframe height to keep the total page size fixed while doing this.

我希望我有一个更清洁的样品，但这里是code我有：

I wish I had a cleaner sample, but here is the code I have:

        $(element).parent().height($(element).height());
        $(element).height(0);
        $(element).height($(element).contents().height());
        $(element).parent().height("");

元素是我的iframe中。

element is my iframe.

iframe的宽度为：100％样式集并与默认样式的div（块）

The iframe has width: 100% style set and is inside a div with default styles (block).

code是jQuery的，并设置DIV高度的iframe的高度，然后将IFRAME为0的高度，然后设置iframe中的内容高度。如果我删除设置IFRAME为0身高线，需要时的iframe将得到更大的，但从来没有变小。

Code is jquery, and sets the div height to the iframe height, then sets iframe to 0 height, then sets iframe to the contents height. If I remove the line that sets the iframe to 0 height, the iframe will get larger when needed, but never smaller.

这篇关于iframe的动态调整高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！