After the recent removal of the @seamless attribute on the <iframe> from the WHATWG spec (issue 331); we still need to consider the problem of setting the height of iframes, so they contain their content without scroll bars.
This proposal is to use 1 line of CSS:
<iframe src="./framed.html" id="iframe"></iframe>
<style>
#iframe { height: max-content; }
</style>
And 1 header, to be set on the framed content (framed.html):
Expose-Height-Cross-Origin: 1;
This header is for security reasons, otherwise it can leak state information (e.g. the height of the page may determine if a user is logged in).
This was the main feature that @seamless needed to provide, rather than the <iframe> content being "rendered in a manner that makes it appear to be part of the containing document" (spec).
Suggested use cases:
- Adverts, where the parent page can provide the context via URL or postMessage.
- Comments on a blog, which you want to sandbox.
- Contact us form, on an otherwise static website.
- Subscribe to our mailing list.
- Payment forms (unfortunately, I hate it when the processor is hidden).
- Recent Tweets from our company account.
- Create a Tweet about this page.
- Current weather at our location.
- RSS reader showing content from a feed.
- Syndicated article being shown on a news website.
Further discussion on this proposal is on:
And the browser feature requests:
It is possible to set the height with JavaScript (demo):
var iframe = document.getElementById('iframe'),
height = iframe.contentWindow.document.body.scrollHeight;
iframe.style.height = height + 'px';
But this needs to be done whenever the content changes, such as navigating to a new page, or when new content is exposed (e.g. JS disclosure widget).
This can be solved with a setTimeout(), which is not ideal.
In the future ResizeObserver might help, but it still requires quite a bit of JavaScript, and does not work Cross-Domain.
Due to the security restrictions in place, this requires the document in the <iframe> to use postMessage() every time the content changes.
This is currently custom code on every website, as no-one can agree on what format the postMessage() should use.
An example can be seen in these child and parent JavaScript files.
- Infinite loops with media queries, raised by Jake Archibald (more details).
- ???
- Queries on Stack Overflow - a common problem.
- Mozilla bug report from 2001 - in relation to seamless.
- Feature request from 2005 - with discussion of problems.
- Example JavaScript solution from 2010 - check the comments.
- Quite a few more.
This could be set on a <textarea>, so its height automatically increases (demo / source):
textarea {
height: max-content;
}
Examples:
- http://alistapart.com/article/expanding-text-areas-made-elegant
- http://www.impressivewebs.com/textarea-auto-resize/
- http://stephanwagner.me/auto-resizing-textarea
- http://github.com/thomasjo/jquery-autoresize
- https://github.com/javierjulio/textarea-autosize
- https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-autosize-textarea
Feature requests:
An alternative to "max-height: 10000px" when animating the opening/closing of a disclosure widget (demo / source):
#widget {
overflow-y: hidden;
height: max-content;
transition-property: all;
transition-duration: .5s;
}
#widget.closed {
height: 0;
}
<p><a href="#widget">Show</a></p>
<div id="widget">
<p>Hidden text</p>
</div>
Examples:
- https://davidwalsh.name/css-slide
- https://jsfiddle.net/ProLoser/nurx8/
- http://weblog.west-wind.com/posts/2014/Feb/22/Using-CSS-Transitions-to-SlideUp-and-SlideDown
- http://stackoverflow.com/questions/17301282/transitioning-between-open-close-in-details-element/17301828
Feature requests: