Jquery Iframe Crossdomain Dynamic Height

Is this even possible with jquery only with no bulky plugins? I know there are lots of plugins and alternatives, i'm searching for the shortest, robustest & most cleanest (pref

Solution 1:

I have to go with "This is not possible" due to the fact that the parent page cannot get the height of the 3rd party page since it is from a different domain than the parent page.

Edit: It is possible to do this if you have some control of the 3rd party page.

I personally would just use the method they already have implemented, it doesn't require jQuery, you just have to include the frame.js.

At that point, all you need is a method on the parent page that listens for when the hash changes and resizes the iframe accordingly, which is also already written by the site you linked. it is a very clean solution already, no real need to modify it. It can be found here.

Solution 2:

This little library will do what you want. It uses postMessage to talk between the iFrame and the parent, so works cross domain. It also uses MutationObserver and EventListeners to detect changes to the content and keep the iFrame correctly sized.

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