Avec les navigateurs disposant d'un zoom pleine page, puis-je utiliser la fonction pour régler le zoom des iframes?

Question

Je pense que de nos jours, tous les navigateurs sont dotés d'un zoom pleine page piloté par l'utilisateur. Est-il en tout cas accessible aux développeurs, via html, css ou javascript?

Je voudrais fournir un iframe, ou même un cadre normal, et le régler, disons, à un zoom de 50%. (Par rapport au zoom actuel du document contenant, idéalement.)

Est-ce que c'est faisable? Cela ne me dérange pas si c'est une solution HTML 5 tant qu'elle a une implémentation fonctionnelle existante. Même si c'est dans une construction nocturne.

Je serais très heureux si cela fonctionnait avec au moins WebKit et Gecko, et un bonus si Trident aussi.

Answer 1

Ce qui suit fonctionne dans Safari 4.0.2 et le dernier WebKit tous les soirs. Il ne fonctionne pas dans Google Chrome (ni Windows ni Mac), cependant.

Comme pour Firefox 3.5 et IE 8.0, pas d'affaire. En outre, aucune affaire sur le dernier Camino tous les soirs.

<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

Le plus proche chose que je peux penser est Zoom en CSS3:

div.zoom { zoom: 200%; } 

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

Cette ne sera pas travail simplement en l'ajoutant à une balise ifarme:

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

Vous aurez à Appliquez-le à un tag de contenu dans le DOM iframe lui-même, soit le BODY ou un wrapper-div.

À part cela, je ne connais pas un moyen de faire cela qui trouverait un grand soutien cross-browser.

Answer 3

Cela peut aussi être fait dans FF, comme ceci:

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

Il fonctionne très bien!

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

Answer 4

Ce code HTML5 et CSS3 qui travaillent pour moi sont: zoom pour IE 6 à 8, et de transformer l'échelle pour le reste des navigateurs modernes.

#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 et versions ultérieures, Safari 3.1, Chrome 4.0, Opera 10.5 sont pris en charge.

Vous recherchez une solution JS ou JQuery telle que this qui fonctionne en mode croisé pour les anciennes versions avec des fonctions personnalisées basées sur l'axe xy et le décalage. Je crois que le chemin est d'utiliser les fonctions d'axe xy mais ne trouve aucun code de zoom pré-fait pour le prendre comme une graine.