Scale contents of an iframe?

[upside]

Hello all,

Does anybody know if it is possible with CSS to scale the contents of an iframe? What I want to do is on my folio here ... http://upsidecreative.com.au/ ... on the bottom folio item, to have the actual website come up when you roll over the thumbnail, with working links and all. (like a mini-version of it). So I need to scale the website in the iframe to 30% or so.

I know I will have to change some things to make the links visible - but first things first.

Many thanks,
Greg

 

[chrishirst]

You can't.

The iframe contents are on an external location (hostname/domain name) to the iframe. Which means that CSS or javascript on the same location of the iframe cannot affect it.

 

[LouTheDesigner]

It's possible to do it dynamically. Here you go.

http://ramanisandeep.net/2009/12/16/how-to-dynamically-adjust-an-iframe’s-height/

-Louis

 

[chrishirst]

The TS wants to scale the CONTENTS of the iframe ie: the elements in the document URL specified in the src attribute of the iframe, NOT the iframe dimensions itself.

 

[LouTheDesigner]

Wow I severely misread that post. I stand corrected.

 

[upside]

couldn't you have a dom within a dom tho?

 

[upside]

or does there need to be a CSS for 'scale appearance of contents'?

 

[chrishirst]

couldn't you have a dom within a dom tho?

Well there is, sort of, the document model for the remote document is rendered in seperate protected memory space.

or does there need to be a CSS for 'scale appearance of contents'?

The reason why it does not, cannot and probably will not work, is because you cannot insert/inject anything into the source code or the DOM of the remote document because of the Cross Site Scripting (XSS) protection built into browsers.

If your iframe content document is on the same domain/hostname as the iframe is, which is called the "same origin policy", you could use

iframeREF.contentWindow.document.getElementById('id')

to target elements on the iframe document.
But cross domains, is not going to happen.

 

[PixelPusher]

...

If your iframe content document is on the same domain/hostname as the iframe is, which is called the "same origin policy", you could use

iframeREF.contentWindow.document.getElementById('id')

to target elements on the iframe document.
But cross domains, is not going to happen.

Exactly. I have achieved cross iframe communication but only when the frames reside on the same domain. As a rule of thumb it is easier to work from the child iframe out as opposed to the parent iframe in.