3

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 (preferably relying on jquery)

Here basic jsfiddle to tryout your thoughts: http://jsfiddle.net/3vPJd/

Writecoder
  • 613
  • 2
  • 8
  • 27
  • what do you mean by dynamic height? like resizes as the window does or what exactly? – Joseph Marikle Sep 15 '11 at 21:29
  • since the parent page doesn't have access to the content within the iframe (it is from a different domain), the parent page cannot figure out what height the iframe's content is. – Kevin B Sep 15 '11 at 21:31
  • I want to have the iframe copy the height of the 3th party page. – Writecoder Sep 15 '11 at 21:32
  • yes, but how are you going to get the height of the 3rd party page? the parent page doesn't have access to that information. – Kevin B Sep 15 '11 at 21:33
  • Here a working example: http://css-tricks.com/examples/iFrameResize/crossdomain.php#frameId=frame-one&height=2045 – Writecoder Sep 15 '11 at 21:36
  • It looks like that requires the 3rd party site to update the parent page's hash with height values which means you have to have some control of the 3rd party site. http://digwp.com/examples/iFrameSource/frame.js – Kevin B Sep 15 '11 at 21:44

2 Answers2

5

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.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • It is possible like i said, there are multiple examples. Im searching for the least "bulky one" Example: http://css-tricks.com/examples/iFrameResize/crossdomain.php#frameId=frame-one&height=2045 – Writecoder Sep 15 '11 at 21:42
  • 1
    see my comment above. that site uses a script included on the 3rd party site, that means you have to have control of the 3rd party site. If that is the case, then yes it is possible, you simply add a hash to the window.top.location and listen for the hash change on the parent page. If that is the case, i can provide some very simple code that will do it. – Kevin B Sep 15 '11 at 21:47
  • Would the 3rd party site require jquery to do this in a couple of lines? If its just a couple of lines plane old javascript code this could be a solution. Could you explain a little more in depth which functions you suggest me to look at? Many thanks. – Writecoder Sep 15 '11 at 21:58
  • 1
    it would require an event handler for window.resize, that should be possible without jQuery. the parent page would just need to listen to the hashChange event(and implement a method to do the same in browsers that dont support that event) and resize the iframe whenever the hash changes to the predetermined value. – Kevin B Sep 15 '11 at 22:03
  • and what about get the height of the content or some main tag like body or something like? Can we grow up our iframe and when the vertical scroll dissapear know the real height? – Leandro Bardelli Sep 20 '12 at 15:04
  • 1
    I don't think so, since the scrollbar is part of the window that you don't have access to. – Kevin B Sep 20 '12 at 15:05
  • oh, i thought it was from the iframe. Good tip! And what about .content() query method? – Leandro Bardelli Sep 20 '12 at 15:09
  • 1
    If it is of a different domain, that will throw a `same-origin` and/or `access denied` error. – Kevin B Sep 20 '12 at 15:12
0

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

David Bradshaw
  • 11,859
  • 3
  • 41
  • 70