0

I've implemented the solution described in this previous post Resizing an iframe based on content and it's almost working great, but not quite.

The problem I'm getting is that sometimes it calculates the height correctly, sometimes it calculates it way too short and the content gets chopped off.

I'm looking for some suggestions as to what may cause this, because everyone else seems to have success. It seems to me that if the height is calculated incorrectly, then perhaps the calculation is happening before all the data has loaded into the iFrame from the external source. But that is a guess, and I am by no means a JS expert.

Is there something I can do to ensure that the calculation is done after the external page has finished loading?

Community
  • 1
  • 1
davidpauljunior
  • 7,930
  • 6
  • 28
  • 51

2 Answers2

0

It is pretty much impossible to get the height calculated right. I have played around with it for quite some time. One of the things I have experienced is, if you have a form inside the iframe and there are some error handling events in the form. Lets say there is a table in the form with hidden rows etc. Then when the errors appear the table gets "higher" as the rows start appearing, so the height range is now different again. Whenever there is a post back done inside the iframe one can not control the height. I have tried about every solution posted out there and could not get it calculated right. I had to estimate the "highest" height and hard code it to be that height.

Shane van Wyk
  • 1,778
  • 1
  • 23
  • 55
  • I hadn't thought about the form issue, would have ran into that one so thanks for the heads up. I think this issue I'm having at the moment is something to do with the standalone app that I'm communicating with is itself doing a number of calls via the googlemaps API based upon the IP of the machine. I think that the height is being calculated before the list of results has fully come back. If I keep pressing refresh, sometimes I see everything perfectly, sometimes I don't. Very odd. – davidpauljunior Sep 26 '13 at 06:24
0

I expect the issue is that you need to detect when the content in your iFrame is changing and then resize your iFrame again. In modern browsers you can use mutationObserver to do this, but it doesn't work in IE10 downwards, so you have to use failbacks to workaround this.

I wrote a small library that looks after all these issue and will keep an iFrame sized to it's content. Work's in modern browsers and IE8 upwards.

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

David Bradshaw
  • 10,116
  • 3
  • 33
  • 61