0

There are many questions answered regarding resizing iframe height according to it's content, but what if the content gets too lengthy and exceeds the height of the container. In this case I want the container height to resize accordingly and without iframe getting scrolls or trimmed in case of setting overflow to hidden. How can I do this?

aledalgrande
  • 5,167
  • 3
  • 37
  • 65
user2911374
  • 159
  • 1
  • 7
  • 16
  • Are you trying to resize the iframe from JS within the iframe or resize the iframe from the containing document? Is the iframe the some domain as the containing page? – jfriend00 Mar 28 '14 at 16:45
  • I'm trying to resize both the iframe and it's container using js according to the content of the iframe. They're not on the same domain. – user2911374 Mar 28 '14 at 16:49
  • Are you trying to do with from the JS within the iframe or from the JS in the containing document? In otherwords, where is the javascript that you're trying to do this from? – jfriend00 Mar 28 '14 at 16:51
  • It's inside the containing document. – user2911374 Mar 28 '14 at 16:56

1 Answers1

1

Since your document and iframe are different domains, the javascript from one cannot directly access the DOM of the other (see same-origin security restrictions). That means that you cannot directly reach into the DOM of the iframe to find out how large it would like to be such that you can set the iframe size to that size from within the containing document.

Any options you have for doing this require some code control within the iframe. For example, you could support window.postMessage() between the two iframes and the containing document could ask the iframe how large it would like to be via window.postMessage() and when it receives the response, it could then change the iframe size.

Various references:

cross-domain iframe resizer?

http://css-tricks.com/cross-domain-iframe-resizing/

Cross-domain, cross-browser Iframe communcation, made easy!

Yet Another cross-domain iframe resize Q&A

https://github.com/davidjbradshaw/iframe-resizer

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Thank you so much jfriend00. It helped. I got another question regarding placing iframe overflow on top of container but because it was unrelated to this question I just mark your answer and open another question for it. – user2911374 Mar 29 '14 at 19:38
  • If you ask me, this should be added to the HTML/CSS standard with a real simple setting like `framewrap:vertical;` Responsive text can be tall or short :-/ – PJ Brunet Nov 20 '17 at 21:06