how can I scale the content of iframe

Question

how can I scale the content of iframe (in my example is an html page), and is not a popup is in page of my web site?

So I want for example to put the content that appears in iframe in for example 80% of the real size.

Can someone help me please....

Thanks (question scraped from http://www.htmlcodetutorial.com/help/sutra32209.html)

Answer 1

I do not think HTML has such functionality. The only thing I can imagine would do the trick is to do some server-side processing. Perhaps you could get an image snapshot of the webpage you want to serve, scale it on the server and serve it to the client. This would be a non-interactive page however. (maybe an imagemap could have the link, but still.)

Another idea would be to have a server-side component that would alter the HTML. SOrt of like the firefox 2.0 zoom feature. this of course is not perfect zooming, but is better than nothing.

Other than that, I am out of ideas.

Answer 2

As said, I doubt you can do it.
Maybe you can scale at least the text itself, by setting a style font-size: 80%;.
Untested, not sure it works, and won't resize boxes or images.

Answer 3

html{zoom:0.4;} ?-)

Answer 4

If your html is styled with css, you can probably link different style sheets for different sizes.

Answer 5

I think you can do this by calculating the height and width you want with javascript (via document.body.clientWidth etc.) and then injecting the iframe into your HTML like this:

var element = document.getElementById("myid");
element.innerHTML += "<iframe src='http://www.google.com' height='200' width='" + document.body.clientWidth * 0.8 + "'/>";

I didn't test this in IE6 but it seems to work with the good ones :)

Answer 6

I found a solution that works in IE and Firefox (at least on the current versions). On Safari/Chrome, the iframe is resized to 75% of its original size, but the content within the iframe is not scaled at all. In Opera, this doesn't seem to work. This feels a bit esoteric, so if there is a better way to do it I'd welcome suggestions.

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>

...

<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>

Note: I had to use the wrap element for Firefox. For some reason, in Firefox when you scale the object down by 75%, it still uses the original size of the image for layout reasons. (Try removing the div from the sample code above and you'll see what I mean.)

I found some of this from this question.

Answer 7

Kip's solution should work on Opera and Safari if you change the CSS to:

#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame {
    zoom: 0.75;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;
}

You might also want to specify overflow: hidden on #frame to prevent scrollbars.