How can I reduce the size of an iframe without having the content cut?

Question

I have a page that loads another page(url) onto it. The problem is that the iframe page does not fit well in the outer page. How can I reduce the size of the iframe page having the content of the iframe page intact? I do not wish to have scroll bars.

Answer 1

Unfortunately you can't really scale an iframe so that its contents change their size. To the browser, the iframe is a window onto another rendering context which has its own layout according to its own CSS. You are at the mercy of how the content inside the iframe is laid out.

If the iframe URL is from a different site and you can't modify it, then you can't really do anything.

If you can modify the page that's displayed within the iframe, well I'd assume you wouldn't be asking.

Answer 2

You could try expanding the width/height of the iframe and checking the clientWidth vs iframe width. If they're equal, there's no scrollbar, otherwise there is.

Use a midpoint approach for efficiency. In sudo-code:

dx = iframe.width;
while (dx > 1) {
  previous = iframe.width
  if( iframe.width - iframe.clientWidth > 0 ) { 
    iframe.width += dx*2;
  } else {
    iframe.width -= dx/2;
  }
  dx = Math.abs(previous-iframe.width)
}