With browsers that have full page scaling, can I use this function to set the zoom for iframes?

Question

I think every browser has custom full-scale scaling at the moment. Is it available to developers through html, css or javascript?

I would like to provide an iframe or even a regular frame and set it, say, to 50% scaling. (Regarding the current scaling of the containing document, ideally.)

Is it even possible? I do not mind if this is an HTML 5 solution, if it has an existing functional implementation. Even if it's in a nightly build.

I would be very happy if he worked, at least with WebKit and Gecko, and a bonus if Trident too.

Answer 1

In Safari 4.0.2 and later, WebKit runs at night. However, it does not work on Google Chrome (neither Windows nor Mac).

As for Firefox 3.5 and IE 8.0, no deals. In addition, not a single deal on the latest Camino is overnight.

<style type="text/css" media="screen">
  iframe {
    width  : 500px;
    height : 250px;
  }
</style>

<script type="text/javascript" charset="utf-8">
  function setZoom(element, zoom) {
    element.style.zoom = (zoom || 50) + '%'
  }
</script>

<p>Hello World</p>

<iframe 
  src    = 'http://google.com' 
  onload = "setZoom(this.contentDocument.body)"
  />

Answer 2

These HTML5 and CSS3 codes work for me: scaling for IE 6 to 8 and zooming for other modern browsers.

#iframe{
    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; }

Firefox 3.5 and higher, Safari 3.1, Chrome 4.0, Opera 10.5 are supported.

You are looking for a JS or JQuery solution like this , which works with a cross browser for older versions with custom functions based on the xy axis and offset.

, , xy, - , .

Answer 3

, , - Zoom CSS3:

div.zoom { zoom: 200%; }

<div class="zoom">
  <p>Hello World</p>
</div>

, ifarme:

<iframe id="myFrame" class="zoom" /> <!-- doesn't work -->

iframe, BODY, wrapper-div.

, , , -.

Answer 4

FF, :

iframe {
 -moz-transform: scale(0.5, 0.5); /* 50% */
}

!

: https://developer.mozilla.org/en/CSS/-moz-transform