2

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.

Anonymous
  • 4,133
  • 10
  • 31
  • 38

3 Answers3

3

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.

thomasrutter
  • 114,488
  • 30
  • 148
  • 167
  • I have access to the other site in the sense that I can set its header. But I don't know anything about the actual code in the other website. I'm not sure how I could use CSS to set the page size – Anonymous Jul 22 '10 at 05:48
  • Not really true, you can use the zoom directive of css to scale it. Support is reasonable in modern browsers. See answer below. – Gringo Suave Jul 19 '11 at 20:20
  • You can using CSS3's `transform:scale(0.5); transform-origin: 0 0;` (also add vendor prefixes), and for MSIE 8 and below: `filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod="auto expand")`. – Blaise Jan 30 '13 at 10:47
1

See the answer here ( How can I scale the content of an iframe? ). I'm using it and it works on FF, Chrome a little flakey.

Community
  • 1
  • 1
Gringo Suave
  • 29,931
  • 6
  • 88
  • 75
0

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)
}
Paul
  • 71
  • 2