Jak mogę skalować zawartość iframe?

Jak mogę skalować zawartość elementu iframe (w moim przykładzie jest to strona HTML, a nie wyskakujące okienko) na stronie mojej witryny?

Na przykład chcę wyświetlić zawartość wyświetlaną w ramce iframe w 80% oryginalnego rozmiaru.

Rozwiązanie Kip powinno działać na Opera i Safari, jeśli zmienisz CSS na:

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

Możesz także określić przepełnienie: ukryte na #frame, aby zapobiec paskom przewijania.

Znalazłem rozwiązanie, które działa w IE i Firefox (przynajmniej w aktualnych wersjach). W przeglądarce Safari / Chrome rozmiar elementu iframe jest zmieniany do 75% jego oryginalnego rozmiaru, ale zawartość elementu iframe nie jest w ogóle skalowana. W Operze to nie działa. To trochę ezoteryczne, więc jeśli istnieje lepszy sposób, chętnie skorzystam z sugestii.

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

Uwaga: musiałem użyć tego wrapelementu w przeglądarce Firefox. Z jakiegoś powodu w Firefoksie, gdy skalujesz obiekt o 75%, nadal używa oryginalnego rozmiaru obrazu ze względu na układ. (Spróbuj usunąć div z powyższego przykładowego kodu, a zobaczysz, co mam na myśli).

Znalazłem trochę tego z tego pytania .

Po wielu godzinach zmagania się z tym, próbując uruchomić go w IE8, 9 i 10, oto co dla mnie zadziałało.

Ten uproszczony CSS działa w FF 26, Chrome 32, Opera 18 i IE9-11 od 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;
}

W przypadku IE8 ustaw szerokość / wysokość, aby dopasować ramkę iframe, i dodaj -ms-zoom do div kontenera .wrap:

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

Wystarczy użyć ulubionej metody podsłuchiwania przeglądarki, aby warunkowo dołączyć odpowiedni CSS, zobacz Czy istnieje sposób na wykonanie warunkowego CSS specyficznego dla przeglądarki w pliku * .css? dla niektórych pomysłów.

IE7 był straconą przyczyną, ponieważ -ms-zoom nie istniał aż do IE8.

Oto rzeczywisty kod HTML, który testowałem:

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

Właśnie przetestowałem i dla mnie żadne inne rozwiązanie nie zadziałało. Po prostu spróbowałem tego i działało idealnie na Firefox i Chrome, tak jak się spodziewałem:

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

i 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;
}

Skaluje to całą zawartość o 30%. Wartości procentowe szerokości / wysokości należy oczywiście odpowiednio dostosować (1 / współczynnik_skalowy).

Nawiązanie do odpowiedzi LXS męska : Zauważyłem problem gdzie posiadające zarówno zoomi --webkit-transformznaczniki jednocześnie wydaje się pomieszać Chrome (wersja 15.0.874.15) wykonując dwukrotnie powiększyć rodzaj efektu. Byłem w stanie obejść ten problem, zastępując zoomgo -ms-zoom(skierowany tylko na IE), pozostawiając Chromeowi korzystanie z samego --webkit-transformtagu, i to wszystko rozwiązało.

Nie trzeba owijać ramki iframe dodatkowym znacznikiem. Upewnij się tylko, że zwiększysz szerokość i wysokość ramki iframe o tę samą wartość, którą skalujesz w dół ramki.

np. aby skalować zawartość iframe do 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;
}

Zasadniczo, aby uzyskać ten sam rozmiar iframe, należy skalować wymiary.

html {zoom: 0.4;}? -)

Myślałem, że podzielę się tym, co wymyśliłem, wykorzystując większość tego, co podano powyżej. Nie sprawdziłem Chrome, ale o ile wiem, działa w IE, Firefox i Safari.

Specyficzne przesunięcia i współczynnik powiększenia w tym przykładzie działały na zmniejszenie i wyśrodkowanie dwóch stron internetowych w elementach iframe dla kart Facebooka (szerokość 810 pikseli).

Dwie wykorzystane strony to strona Wordpress i sieć Ning. Nie jestem zbyt dobry w html, więc prawdopodobnie można by to zrobić lepiej, ale wynik wydaje się dobry.

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

Jeśli chcesz, aby element iframe i jego zawartość skalowały się podczas zmiany rozmiaru okna, możesz ustawić następujące parametry dla zdarzenia zmiany rozmiaru okna, a także zdarzenia obciążenia 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';
  };

Spowoduje to, że element iframe i jego zawartość zostaną skalowane do 100% szerokości elementu div zawijania (lub dowolnego żądanego procentu). Jako dodatkowy bonus, nie musisz ustawiać css ramki na sztywno zakodowane wartości, ponieważ wszystkie będą ustawiane dynamicznie, musisz tylko martwić się o to, jak chcesz wyświetlać wrap div.

Przetestowałem to i działa na Chrome, IE11 i Firefox.

Myślę, że możesz to zrobić, obliczając żądaną wysokość i szerokość za pomocą javascript (przez document.body.clientWidth itp.), A następnie wstrzykując iframe do swojego HTML w następujący sposób:

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

Nie testowałem tego w IE6, ale wydaje się, że działa z tymi dobrymi :)

Dla tych, którzy mają problem z uruchomieniem tego w IE, pomocne jest użycie -ms-zoomzgodnie z sugestią poniżej i użycie funkcji powiększania na #wrapdiv, a nie iframeid. Z mojego doświadczenia wynika, że zoomfunkcja próbująca przeskalować div elementu iframe #framespowodowałaby przeskalowanie rozmiaru elementu iframe, a nie zawartości w nim zawartej (to jest to, o co chodzi).

Wygląda tak. Działa dla mnie na IE8, Chrome i FF.

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

To było moje rozwiązanie na stronie o szerokości 890 pikseli

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

}

Rozwiązanie #wrap #frame działa dobrze, o ile liczby w #wrap będą równe #frame razy współczynnik skali. Pokazuje tylko tę część pomniejszonej ramki. Możesz to zobaczyć tutaj, zmniejszając strony internetowe i wprowadzając go do formy przypominającej zainteresowanie (z wtyczką jQuery woodmark):

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

Prawdopodobnie nie jest to najlepsze rozwiązanie, ale wydaje się działać.

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

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

Oczywiście nie próbując naprawić rodzica, po prostu dodając styl „zoom: 50%” do ciała dziecka za pomocą odrobiny javascript.

Może mógł ustawić styl elementu „HTML”, ale tego nie próbował.

Jeśli Twój HTML jest stylem css, prawdopodobnie możesz połączyć różne arkusze stylów dla różnych rozmiarów.

Nie sądzę, żeby HTML miał taką funkcjonalność. Jedyną rzeczą, jaką mogę sobie wyobrazić, byłaby sztuczka po stronie serwera. Być może możesz uzyskać migawkę obrazu strony internetowej, którą chcesz wyświetlać, skalować na serwerze i podawać klientowi. Byłaby to jednak strona nieinteraktywna. (może mapa obrazu może mieć link, ale nadal).

Innym pomysłem byłoby posiadanie komponentu po stronie serwera, który zmieniałby HTML. Bardzo podobna funkcja zoomu w Firefoksie 2.0. to oczywiście nie jest idealne powiększanie, ale jest lepsze niż nic.

Poza tym nie mam pomysłów.

Jak powiedziałem, wątpię, czy możesz to zrobić.
Być może możesz skalować przynajmniej sam tekst, ustawiając styl font-size: 80%;.
Nie przetestowano, nie jestem pewien, czy to działa i nie zmienia rozmiaru pól ani obrazów.