How could I have an iframe that shows the target page and all it's elements at 50% scale?

Question

My first thought was trying to write a css scale property to the frame, but I'm not sure if you can write css to the contents of the frame.

Thanks!

Does the iframe point to the same domain as the parent, or another domain? — Mikey G, Feb 16 '12 at 17:35
possibly `* { zoom: 0.5; }` though I'm not sure how `zoom` holds in regards to standards or compliance. (That also may only be an IE thing) — Brad Christie, Feb 16 '12 at 17:42
@Cheery hrrm this doesn't seems to scale the actual contents of the frame, just the frame itself. — fancy, Feb 16 '12 at 18:09

score 0 · Answer 1 · answered Feb 16 '12 at 18:32

0

Since the page is in the same domain, you might be able to place this code:

<script type="text/javascript">
if (location.href != top.location.href) {

   // the page is loaded inside an iframe so
   // Make everything 50% scale (I'm not sure what the code for that is in pure js)
   // With jQuery:

   $("*").css("zoom","50%");

} 
</script>

In the head of the page you are loading in the iframe.

If you're not using JQuery, this page

http://pietschsoft.com/post/2006/06/01/Javascript-Loop-through-all-elements-in-a-form.aspx

has a good example of how to loop through all the elements in a form without a library like JQuery.

answered Feb 16 '12 at 18:32

Mikey G

3,473
1
22
27

Cool, I could see this working, how do I inject that code though? Thanks. – fancy Feb 16 '12 at 23:13
Shouldn't the style only be applied on the body? – Bergi Feb 16 '12 at 23:49
@Bergi Could be, i'm not 100% sure how the zoom attribute works – Mikey G Feb 17 '12 at 15:53
@fancy if you are using jquery, then put it between the tags after you load jquery, if you're not using jquery, then anywhere int he head should work – Mikey G Feb 17 '12 at 15:54

fancy · Accepted Answer · 2012-02-17T00:50:07.530

0

Easier then I thought...

<iframe id="frame"></iframe>

$('#frame').css
    '-webkit-transform': 'scale(.5)'
    '-moz-transform': 'scale(.5)'
    '-o-transform': 'scale(.5)'

edited Feb 17 '12 at 00:50

answered Feb 17 '12 at 00:00

fancy

48,619
62
153
231

You forgot `-ms-transform`. Don't diss Microsoft now that they've got their act in gear. – Niet the Dark Absol Feb 17 '12 at 00:53

How could I have an iframe that shows the target page and all it's elements at 50% scale?

2 Answers2