2

I've been researching this for a few days and I'm stuck... I read this page:

Resizing an iframe based on content

and this page:

Auto resize iframe height when the height of the iframe contents change (same domain)

It seems it's relatively easy to resize an iframe when the maine index.html that contains the iframes first loads, but once the iframe changes content I can't figure out how to re-size the iframe.

my index.html:

<body>
<iframe seamless frameborder="0" name="top" id="top" src="venues.php" width="100%" height="100" /></iframe>
<iframe seamless frameborder="0" name="main" id="main" src="admin.php" width="100%" height="2000" /></iframe>

When venues.php loads it's 100px (which is fine) but when somebody clisk in a (internal, same domain) link inside the venues.php page I need to resize the "top" frame height to fit the new contents.

I've tried a bunch of solutions I can always only get it resized on the first load but not when somebody clicks inside it.

Thanks

marcnyc
  • 545
  • 3
  • 16
  • I've solved this using JS in the frame to send a message to JS in the container. The message says how big the frame needs to be, the JS in the container than resizes the control. – Richard Jun 10 '16 at 16:06
  • could you show me an example or at least tell me how you are sending the message to the container? I was under the impression (from things I read in one of those links) that you cannot communicate from the child to the parent – marcnyc Jun 10 '16 at 16:12
  • Have you had a look at:- http://stackoverflow.com/questions/12082125/resize-iframe-on-content-refresh-or-update – Tony Hensler Jun 10 '16 at 16:15

2 Answers2

2

You could use the mutation observer event and the postMessage API, It's very difficult to create and implement script that can negotiate the dimension measurements of an iframe that frequently changes. I gave up on writing something from scratch and used this small plugin:

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

This Plunker demonstrates the use of this plugin when detecting the mutation observer event fire when resizing of the iframe happens.

PLUNKER

zer00ne
  • 31,838
  • 5
  • 32
  • 53
0

You could have a look at David Bradshaws git repo

He has developed a nice script to do what you are looking for.

Keep same and cross domain iFrames sized to their content with support for >window/content resizing, in page links, nesting and multiple iFrames. >(Dependency free, IE8+) http://davidjbradshaw.github.io/iframe-resizer/

Tony Hensler
  • 16
  • 3
  • I have looked at Bradshaw's iFrame Resizer but couldn't get it to work... in fact in Chrome (locally) his test example did not even work for me – marcnyc Jun 10 '16 at 16:30
  • @marcnyc Try my demo, Chrome 51 tests just fine. – zer00ne Jun 10 '16 at 16:33