Come posso ridimensionare il contenuto di un iframe?

Come posso ridimensionare il contenuto di un iframe (nel mio esempio è una pagina HTML e non è un popup) in una pagina del mio sito web?

Ad esempio, voglio visualizzare il contenuto visualizzato nell'iframe all'80% della dimensione originale.

La soluzione di Kip dovrebbe funzionare su Opera e Safari se cambi il CSS in:

<style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-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;
    }
</style>

Potresti anche voler specificare l'overflow: nascosto su #frame per impedire le barre di scorrimento.

Ho trovato una soluzione che funziona su Internet Explorer e Firefox (almeno sulle versioni attuali). Su Safari / Chrome, l'iframe viene ridimensionato al 75% della sua dimensione originale, ma il contenuto all'interno dell'iframe non viene ridimensionato affatto. In Opera, questo non sembra funzionare. Questo sembra un po 'esoterico, quindi se c'è un modo migliore per farlo, darei il benvenuto a suggerimenti.

<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>

Nota: ho dovuto usare l' wrapelemento per Firefox. Per qualche motivo, in Firefox quando ridimensionate l'oggetto del 75%, per motivi di layout utilizza comunque la dimensione originale dell'immagine. (Prova a rimuovere il div dal codice di esempio sopra e vedrai cosa intendo.)

Ho trovato parte di questo da questa domanda .

Dopo aver lottato con questo per ore cercando di farlo funzionare in IE8, 9 e 10, ecco cosa ha funzionato per me.

Questo CSS abbattuto funziona in FF 26, Chrome 32, Opera 18 e IE9 -11 dal 1/7/2014:

.wrap
{
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}

.frame
{
    width: 1280px;
    height: 786px;
    border: 0;

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

Per IE8, imposta la larghezza / altezza in modo che corrisponda all'iframe e aggiungi -ms-zoom al div del contenitore .wrap:

.wrap
{
    width: 1280px; /* same size as frame */
    height: 768px;
    -ms-zoom: 0.25; /* for IE 8 ONLY */
}

Usa il tuo metodo preferito per lo sniffing del browser per includere in modo condizionale il CSS appropriato, vedi Esiste un modo per creare CSS condizionali specifici del browser all'interno di un file * .css? per alcune idee.

IE7 era una causa persa poiché -ms-zoom non esisteva fino a IE8.

Ecco l'HTML effettivo con cui ho provato:

<div class="wrap">
   <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://apple.com"></iframe>
</div>

http://jsfiddle.net/esassaman/PnWFY/

Ho appena testato e per me nessuna delle altre soluzioni ha funzionato. Ho semplicemente provato questo e ha funzionato perfettamente su Firefox e Chrome, proprio come mi aspettavo:

<div class='wrap'>
    <iframe ...></iframe>
</div>

e il css:

.wrap {
    width: 640px;
    height: 480px;
    overflow: hidden;
}

iframe {
    width: 76.92% !important;
    height: 76.92% !important;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

Questo ridimensiona tutto il contenuto del 30%. Le percentuali di larghezza / altezza ovviamente devono essere adeguate di conseguenza (1 / scale_factor).

Risposta a risposta di LXS : ho notato un problema in cui avere sia l' zoome --webkit-transformtag allo stesso tempo sembra confondere Chrome (versione 15.0.874.15) facendo un doppio-Zoom sorta di effetto. Sono stato in grado di aggirare il problema sostituendolo zoomcon -ms-zoom(mirato solo a IE), lasciando Chrome a utilizzare solo il --webkit-transformtag e questo ha chiarito le cose.

Non è necessario avvolgere l'iframe con un tag aggiuntivo. Assicurati solo di aumentare la larghezza e l'altezza dell'iframe della stessa quantità con cui riduci l'iframe.

ad es. per ridimensionare il contenuto di iframe all'80%:

#frame { /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */
}
#frame {
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8); 
    transform-origin: 0 0;
}

Fondamentalmente, per ottenere la stessa dimensione iframe è necessario ridimensionare le dimensioni.

html {zoom: 0.4;}? -)

Ho pensato di condividere ciò che mi è venuto in mente, usando gran parte di ciò che è stato dato sopra. Non ho controllato Chrome, ma funziona su Internet Explorer, Firefox e Safari, per quanto ne so.

Gli offset specifici e il fattore di zoom in questo esempio hanno funzionato per ridurre e centrare due siti Web in iframe per le schede di Facebook (larghezza 810px).

I due siti utilizzati erano un sito wordpress e una rete ning. Non sono molto bravo con HTML, quindi probabilmente questo avrebbe potuto essere fatto meglio, ma il risultato sembra buono.

<style>
    #wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
    #frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
    #frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="wrap">
    <iframe id="frame" src="http://www.example.com"></iframe>
</div>

Se si desidera ridimensionare l'iframe e il suo contenuto quando si ridimensiona la finestra, è possibile impostare quanto segue sull'evento di ridimensionamento della finestra e sull'evento onload dell'iframe.

function()
{
    var _wrapWidth=$('#wrap').width();
    var _frameWidth=$($('#frame')[0].contentDocument).width();

    if(!this.contentLoaded)
      this.initialWidth=_frameWidth;
    this.contentLoaded=true;
    var frame=$('#frame')[0];

    var percent=_wrapWidth/this.initialWidth;

    frame.style.width=100.0/percent+"%";
    frame.style.height=100.0/percent+"%";

    frame.style.zoom=percent;
    frame.style.webkitTransform='scale('+percent+')';
    frame.style.webkitTransformOrigin='top left';
    frame.style.MozTransform='scale('+percent+')';
    frame.style.MozTransformOrigin='top left';
    frame.style.oTransform='scale('+percent+')';
    frame.style.oTransformOrigin='top left';
  };

Questo renderà l'iframe e il suo contenuto ridimensionati al 100% della larghezza del div avvolgente (o qualunque percentuale tu voglia). Come bonus aggiuntivo, non devi impostare i css del frame su valori hard coded poiché saranno tutti impostati dinamicamente, dovrai solo preoccuparti di come vuoi visualizzare il div avvolgente.

Ho provato questo e funziona su Chrome, IE11 e Firefox.

Penso che puoi farlo calcolando l'altezza e la larghezza che desideri con javascript (tramite document.body.clientWidth ecc.) E quindi iniettando l'iframe nel tuo HTML in questo modo:

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

Non ho provato questo in IE6 ma sembra funzionare con quelli buoni :)

Per quelli di voi che hanno difficoltà a farlo funzionare in IE, è utile usare -ms-zoomcome suggerito di seguito e usare la funzione di zoom sul #wrapdiv, non l' iframeid. Nella mia esperienza, con la zoomfunzione che prova a ridimensionare il div iframe di#frame , ridimensionerebbe la dimensione dell'iframe e non il contenuto al suo interno (che è quello che stai cercando).

Somiglia a questo. Funziona per me su IE8, Chrome e FF.

#wrap {
  overflow: hidden;
  position: relative;
  width:800px;
  height:850px;
  -ms-zoom: 0.75;
}

Questa era la mia soluzione su una pagina con una larghezza di 890 px

#frame { 
overflow: hidden;
position: relative;
width:1044px;
height:1600px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-origin: 0px 0;
-o-transform: scale(0.85);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-origin: 0 0; 

}

La soluzione #wrap #frame funziona bene, purché i numeri in #wrap siano #frame volte il fattore di scala. Mostra solo quella parte del riquadro ridimensionato. Puoi vederlo qui ridimensionando i siti Web e inserendolo in una forma simile a pinterest (con il plug-in jQuery woodmark):

http://www.genautica.com/sandbox/woodmark-index.html

Quindi probabilmente non è la soluzione migliore, ma sembra funzionare bene.

<IFRAME ID=myframe SRC=.... ></IFRAME>

<SCRIPT>
    window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>

Ovviamente non sto cercando di riparare il genitore, aggiungendo semplicemente lo stile "zoom: 50%" al corpo del bambino con un po 'di javascript.

Forse potrebbe impostare lo stile dell'elemento "HTML", ma non ci ha provato.

Se il tuo html è in stile con CSS, probabilmente puoi collegare diversi fogli di stile per dimensioni diverse.

Non credo che l'HTML abbia tale funzionalità. L'unica cosa che posso immaginare farebbe il trucco è fare un po 'di elaborazione sul lato server. Forse potresti ottenere un'istantanea dell'immagine della pagina web che vuoi pubblicare, ridimensionarla sul server e servirla al client. Questa sarebbe comunque una pagina non interattiva. (forse una imagemap potrebbe avere il link, ma comunque.)

Un'altra idea sarebbe quella di avere un componente lato server che altererebbe l'HTML. Un po 'come la funzione zoom di Firefox 2.0. questo ovviamente non è uno zoom perfetto, ma è meglio di niente.

A parte questo, sono senza idee.

Come detto, dubito che tu possa farlo.
Forse puoi ridimensionare almeno il testo stesso, impostando uno stile font-size: 80%;.
Non testato, non è sicuro che funzioni e non ridimensionerà scatole o immagini.