Zoom content of iframe according to page size

Question

I want to have an iframe on my page, below a navigation bar, that always

• stretches to the width of browser window
• zooms its content's width according to the page width in the browser

So ie when I resize the browsers window, the iframe width would vary, to always be full width of the browser AND the iframe zoom would vary to always show the whole width of the contained page, without a horizontal scroll bar (vertical scroll bar is ok, of course).

How can I achieve this?

Answer 1

I would suggest taking the following steps:

1) Set iframe width to 100% by using style="width: 100%;".

2) Communicate the iframe width on the main page (in pixels) to the page in iframe via window.postMessage, whenever the iframe width is changed.

3) Make a message handler to the page in the iframe, and set the page width and zoom to the right amount so that no horizontal scrollbar is displayed.